Проблема IE7 CSS: невозможно получить правильную ширину диапазона

Question

У меня проблема с получением правильной ширины пролета. Он работает в следующих браузерах, а НЕ в IE7: Работает в: Fire Fox Хром Сафари 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; }

Когда я оповещаю ($ ('. External-span'). Width ()) во всех браузерах, КРОМЕ IE7 я получаю 120. В IE7 предупреждение показывает мне, что ширина 'external-span' равна 700px, что, вероятно, является шириной одного из его родителей.

Я знаю, что для точного рассуждения о проблеме вы, вероятно, должны увидеть html над блоком, который я разместил. Однако я ищу несколько советов по устранению проблемы или подсказку о том, почему IE7 действует таким образом или как IE7 по-разному работает. Я не ищу вас, чтобы переписать мой код или придумать какой-нибудь CSS-хак. Прокомментируйте, если вам нужно больше разъяснений по проблеме.

Answer 1

Вы не можете поместить <div> (элемент блока) внутри <span> (встроенный элемент).Он недействителен и не имеет смысла.

Браузеры могут попытаться исправить вашу ошибку, например, закрыв <span>, когда увидит открытие <div>.Это приведет к тому, что промежуток будет пустым и, следовательно, не будет иметь ширину.Но это поведение будет различным в разных браузерах.

Кроме того, вы не можете поместить width во встроенный элемент.Это не будет иметь никакого эффекта, если у вас нет IE в режиме Quirks ... что может быть в случае, если это работает для вас.Вы действительно хотите избегать Quirks Mode (используйте правильный <!DOCTYPE>!).

Если вы хотите, чтобы простая оболочка блока содержала <div>, она также должна быть <div>.

Answer 2

По умолчанию промежутки встроены, а div - это блочные элементы. Наличие div внутри span не имеет большого смысла без изменения атрибута отображения CSS по умолчанию. Попробуйте использовать вложенные элементы div с шириной CSS на них обоих, либо изменить внутренний элемент div на span, либо использовать display: inline для внутреннего элемента div.

Answer 3

Возможно, что IE7 выбрасывает соответствие, потому что у вас есть диапазон, окружающий div, а у встроенных элементов не может быть дочерних элементов уровня блока. Попробуйте применить:

.outer-span { display:block }

Если это работает, то я рекомендую изменить рассматриваемый диапазон на div.