Узнайте, в чем причина определенного вычисленного стиля CSS

У меня есть <div> на веб-странице, которая в конечном итоге рассчитывается с высотой 633 пикселей. Это не установлено ни в одной каскадной таблице стилей, встроенной или нет, а также в javascript. Я искал везде в своем коде, но номер 633 нигде не отображается. Я могу решить это, установив style="height: 420px;" это высота, которую я хочу, но IE, кажется, переопределяет это на 633px, что я получал бы и в других браузерах по умолчанию. В Google Chrome и Firefox/Firebug я проверил, что фактическое содержимое div не достигает 633 пикселей в высоту. Могу ли я узнать, в чем причина этой расчетной высоты? Для полноты вот что Google Chrome сообщает как свойства стиля <div>,

Computed Style
background-color: white;
display: block;
float: left;
height: 633px;
margin-left: 30px;
margin-top: 20px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
width: 830px;

Inline Style Attribute
margin-left: 30px;
margin-top: 20px;

#overview
background-color: white;
float: left;
padding: 0px;
width: 830px;

#overview, #overviewempty
margin-top: 9px; (is crossed out)

div
display: block;

Заранее спасибо.

Редактировать:

Div в вопросах содержит два div, один с одной строкой текста в font-size: 16px;и div с высотой 367px.

Другое редактирование:

Хорошо, я выяснил, что вызывает это. Второй элемент div, который содержит основной элемент div, содержит одно изображение и элемент div, плавающий справа от этого изображения с использованием position: relative; top: -335px;, Internet Explorer сохраняет место, где этот элемент был бы пустым. Любой способ обойти это?

Окончательное редактирование:

Решил это! Я обернул содержимое плавающего div с position: relative во втором диве с position: absolute, что избавляет от пробелов под основным изображением:) Конечный HTML выглядит примерно так:

<div id="overview">
  <div>Some text>
  <div>
    <img src="someImage.jpg">
    <div style="float: right; position: relative; top: -335px;">
      <div style="position: absolute; top: 0px; left: 0px; background-color: white; width: 365px;">
        Some floating contents
      </div>
    </div>
  </div>
</div>
Источник

4 ответа

Решение

Установите IE Developer Toolbar для Internet Explorer. Иногда это делает жизнь намного проще. РЕДАКТИРОВАТЬ: новые версии IE содержат инструменты разработчика по умолчанию, доступ к которым можно нажать F12.

Источник

В том же духе, что и панель инструментов разработчика IE, взгляните на Firebug для Firefox.

Это расскажет вам все стили, которые применяются к элементу, и покажет вам, какие из них были переопределены.

Источник

Высота элемента обычно определяется его содержимым. У вас есть текст или другой материал на 633 пикселя?

Вычисленный стиль не обязательно происходит из какой-либо таблицы стилей или JavaScript. Это как раз то, чем заканчивается стиль после того, как движок рендеринга завершил вычисление всего.

Источник

хороший график с https://developer.chrome.com/devtools/docs/elements-styles

щелкните "Computed Style", чтобы узнать, почему / какое свойство переопределяет друг друга.

Источник
Другие вопросы по тегам