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

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

4 голосов
/ 24 марта 2009

У меня есть <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 во второй div с 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 ]

3 голосов
/ 24 марта 2009

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

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

1 голос
/ 24 марта 2009

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

1 голос
/ 24 марта 2009

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

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

0 голосов
/ 21 ноября 2014

enter image description here

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

нажмите «Вычисляемый стиль», чтобы узнать, почему / какое свойство перекрывает друг друга.

...