Головные боли IE - CSS: селектор первого ребенка не работает, странное поведение при использовании Google Web Fonts - PullRequest
Новая
       18

Головные боли IE - CSS: селектор первого ребенка не работает, странное поведение при использовании Google Web Fonts

2 голосов
/ 22 января 2012

Я пытаюсь создать макет веб-сайта, но сейчас у меня проблемы с IE.Вы можете увидеть проблему на http://dhines.com/moyatest.

Если вы посмотрите на страницу в IE против Firefox, вы увидите два отличия.Первый - это верхний модуль справа.IE добавляет 10px поле в верхнюю часть и игнорирует часть в моем CSS, где я указываю, что у первого потомка есть верхнее поле: 0px.

Другое отличие - это шрифт.Я использую Google Web Font, который, конечно, работает хорошо в FF, но в IE шрифт меняется каждый раз, когда я обновляю страницу.Проверьте сами, каждое обновление страницы меняет шрифт.Это очень странно, потому что я использую веб-шрифты Google на своем личном сайте без кросс-браузерных проблем.

CSS для модулей: 

#page-modules
{width:250px; margin:0px; padding:0px; float:right;}

.module
{width:250px; margin:0px; padding:0px; margin-top:10px; background:url('../images/trans-bg.png');}

.module:first-child
{margin-top:0px;}

.module-spacer
{width:20px; height:200px; padding:0px; margin:0px; float:left;}

(Класс module-spacer хранит текст20px от левой стороны и его высота контролирует минимальную высоту модуля)

И HTML: 

<div id="page-modules">
    <div class="module">
        <div class="module-spacer">
        </div>
            <div class="module-content">            
            Test            
        </div>
            <div class="clear">
        </div>
    </div>

    <div class="module">
        <div class="module-spacer">
        </div>
        <div class="module-content">
            Test        
        </div>
        <div class="clear">
        </div>
    </div>      
    <div class="clear">
    </div>
</div>

Теперь что касается шрифтов, я добавляю это в раздел head: 

<link href='http://fonts.googleapis.com/css?family=Alegreya:400,700,400italic,700italic,900,900italic' rel='stylesheet' type='text/css'>

Тогда селектор тела в моем CSS: 

 body
 {font-family: 'Alegreya', serif; font-weight:400; font-style:normal;}

Ответы [ 2 ]

2 голосов
/ 23 января 2012

Вы забыли добавить объявление DOCTYPE на свою страницу, поэтому IE возвращается в режим причуд.В результате он игнорирует ваши псевдоклассы :first-child и :hover и не будет отображать веб-шрифты, которые не в формате EOT (Google обслуживает только WOFF).

Firefox также отображает вашистраница в режиме причуд.Однако он изначально поддерживает оба псевдокласса, поэтому в Firefox вы не наблюдаете того же поведения, что и в IE.

0 голосов
/ 23 января 2012

Как и то, что сказал BoltClock, вы не устанавливаете margin: 0 на body.В IE есть поле по умолчанию - это хорошо для нестильных страниц, потому что текст, помещенный до края окна, очень непривлекателен.

...