Проблема установки высоты div в Internet Explorer 7 - PullRequest
Новая
       2

Проблема установки высоты div в Internet Explorer 7

3 голосов
/ 21 января 2011

У меня есть div с красивым кривым фоновым изображением, поэтому он закругляет углы во всех браузерах.

Проблема в том, что в Internet Explorer за фоновым изображением следует цветная линия фона.Если я установлю высоту div, Firefox и Chrome уменьшат высоту div, однако IE ничего не отрегулирует.

Вот мой CSS.Обратите внимание, что остальная часть CSS применяется в IE (и в FF / Chrome) нормально. 

#MSBottomSlot .topCurve {
    background:url("images/topCurve.jpg"); 
    background-repeat:no-repeat;
    height:10px; /* Changing this value does nothing in IE */
    width:100%;
}

Есть ли какой-то IE 'gotcha' относительно высоты, который мне не хватает?

Вот некоторые дополнительные подробности:

  • Строка не отображается в FF или Chrome.
  • На странице есть небольшой javascript, ничто не повлияет на то, как это будет выглядеть.
  • Другие изменения в CSS применяются к div.

Ответы [ 3 ]

8 голосов
/ 21 января 2011

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

line-height: 0;
font-size: 0;
2 голосов
/ 21 января 2011

Не забудьте установить тип документа, чтобы браузер не переходил в режим quirksmode

Первая строка вашего HTML-документа должна быть 

<!DOCTYPE html>

Вы также можете использовать более традиционный xhtml-тип документа, такой какthis: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Но я рекомендую первый тип, совместимый с html5 и прекрасно работающий в IE, даже если они не поддерживают html5, и он выглядит намного лучше, чем этот ужасный xhtml doctype;)

Также помните, что вы не можете применить высоту к элементам inline, только к элементам уровня блока, поэтому ваш элемент должен быть display: block или display: inline-block или подобным;)

0 голосов
/ 21 января 2011

Попробуйте применить переполнение: скрыто в вашем CSS 

#MSBottomSlot .topCurve {
    background:url("images/topCurve.jpg"); 
    background-repeat:no-repeat;
    height:10px; /* Changing this value does nothing in IE */
    width:100%;
    overflow:hidden; 
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...