IE7 CSSの問題：正しいスパン幅を取得できません

Question

スパンの正しい幅を取得できません。これはIE7での次のブラウザとNOTで動作：中 作品： Firefoxの クローム サファリ IE8

私はので、私はjqueryの関数の引数として渡すことができスパンの正しい幅を取得する必要があります。

例のコードは問題のあるコードと同じですが、例を理解しやすくするために一般的なクラス名が代入されています。

関連HTML：

... 
<span class="outer-span"> 
<div class="inner-div"> 
    <a href="http://www.google.com"> 
    <span class="selected"> 
    <c:out value="${somestring}" /> 
    </span> 
    </a> 
</div> 
</span> 
... 

関連CSS：私は警告

.outer-span { width: 120px; } 

（。$（ '外側のスパン'）の幅（））IE7を除くすべてのブラウザで私が手120 。 IE7では、「outer-span」の幅が700pxであることがわかりました。おそらくその親の1つの幅です。

私は、問題について正確に理由を説明するために、おそらく私が投稿したブロックの上にHTMLを表示する必要があることを知っています。しかし、私が探しているのは、問題をデバッグするためのいくつかのヒント、またはIE7がこのように動作する理由、またはIE7がどうやって処理するかについての手がかりです。私はあなたのコードを書き直すか、CSSのハックを考え出すつもりはありません。問題についての詳細な説明が必要な場合はコメントしてください。

Answer 1

（インライン要素）内に<div>（ブロック要素）を配置することはできません。それは無効で意味がありません。

ブラウザそれは開口部<div>を見たときに<span>を閉じることにより、例えば、自分の間違いを修正しようとするかもしれません。これにより、スパンは空になり、したがって幅はありません。しかし、この動作はブラウザによって異なります。

また、widthをインライン要素に配置することはできません。 QuirksモードでIEを持っていない限り、何の効果もありません...これはあなたのために働いている場合があります。あなたは本当にクォーク・モードを避けたい（適切な<!DOCTYPE>を使用してください！）。

単純なブロックラッパーに<div>を含める場合は、おそらく<div>である必要があります。

Answer 2

divを囲むスパンがあり、インライン要素がブロックレベルの子を持つことができないため、IE7がうまくいっている可能性があります。申し込みを試してください：

.outer-span { display:block } 

それが有効な場合は、問題のスパンをdivに変更することをおすすめします。デフォルトでは

Answer 3

、スパンは、インラインで、divタグはブロック要素です。スパン内にdivを持つことは、デフォルトのCSS表示属性を変更しなければ意味をなさない。両方のCSSの幅を持つネストされたdivを使用するか、内側divをspanに変更するか、内側divのdisplay：inlineを使用してみてください。