Проблемы с рендерингом CSS на IE9; Условные заявления не исправить - PullRequest
Новая
       2

Проблемы с рендерингом CSS на IE9; Условные заявления не исправить

0 голосов
/ 04 апреля 2011

Привет, ребята, по большей части, IE9 прекрасно отображает мой сайт на Wordpress. Просто отлично, я имею в виду приемлемый на данный момент. Единственная проблема заключается в том, что IE9 не показывает фон или текст для заголовков виджетов моей домашней страницы. Для браузеров, таких как Firefox, Chrome, Safari и т. Д. И т. Д. Я использую красный градиентный фон с белым текстом и закругленными углами, которые, конечно, работают нормально. Для IE9 я добавил условный оператор, чтобы установить фон заголовка виджета как сплошной красный цвет без закругленных углов. К сожалению, это не решило проблему. Фон все еще не обнаруживается. Сумасшедшая вещь в том, что когда я открываю сайт в IE7 с помощью Wine на моем Mac, фон заголовка виджета отображается сплошным цветом ...

В качестве второй меры тестирования я установил фон в качестве сплошного цвета без закругленных углов в основной таблице стилей, чтобы посмотреть, будет ли это работать в IE9. Конечно, это не так. Даже при изменении основного файла CSS фон / текст заголовка виджета все равно не отображался. У меня действительно нет идей относительно того, что может быть не так, и мне было интересно, могу ли я получить некоторую помощь.

Вы можете найти веб-сайт, перейдя на bso.larryandpriscilla.com

Хорошо, для заголовка виджета приведен код. Есть ли другой код, который будет полезен? 

.widget-title {
    color: #fff;
    width:300px;
    margin-left: -1px;
    height:30px;
    margin-top: -30px;
    text-align: center;
    text-shadow: rgba(0,0,0,.5) 1px 1px 1px; 
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    -webkit-border-top-right-radius: 10px; 
    -moz-border-radius-topright: 10px; 
    border-top-right-radius: 10px;
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    border-top-left-radius: 10px; 
    background: #A50000; /* old browsers */
    background: -moz-linear-gradient(top, #A50000 0%, #670000 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A50000), color-stop(100%,#670000)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A50000', endColorstr='#670000',GradientType=0 );
}

Вот условное утверждение, которое я использовал. Я не уверен, что имеет значение, но я помещаю это в раздел заголовка файла заголовка: 

<!--[if gt IE 6]>
<style type="text/css">
     .widget-title {
        color: #fff;
        background-color: #A50000;
        width:300px;
        margin-left: -1px;
        height:30px;
        margin-top: -30px;
        text-align: center;
        font-family: Helvetica, Arial, sans-serif;
        font-weight: 400;
}
</style>
<![endif]-->

Вот текущий условный комментарий: 

<!--[if IE]>
<style type="text/css">
     .widget-title {
        color: #fff;
        background-color: #A50000;
        width:300px;
    margin-top: 0px;
        margin-left: -1px;
        height:30px
        text-align: center;
        font-family: Helvetica, Arial, sans-serif;
        font-weight: 400;
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A50000', endColorstr='#670000',GradientType=0 );
}
</style>
<![endif]-->

1 Ответ

1 голос
/ 05 апреля 2011

В IE8 (спасибо, что заставили меня работать, чтобы скрыть сообщение об обновлении браузера!), Заголовки виджета есть, но margin-top:-30px смещает их ниже содержимого виджета. Я бы посмотрел на макет в целом, так как я вынул margin-top и появились полосы прокрутки. В частности, у вас есть <li> элементы, не входящие в <ul> или <ol>. Браузеры должны будут отгадывать недостающие элементы при отображении страницы. Я бы начал с проверки страницы . Другая идея может заключаться в том, чтобы разметить 3 виджета по-разному, например, это может быть основой для подобного макета без плавающих или отрицательных полей: 

<style type="text/css">
    ul { list-style-type:none; }
    li { display:inline-block; }
</style>
<ul>
    <li>
        <h4>Title</h4>
        <div>Content</div>
    </li>
    <li>
        <h4>Title</h4>
        <div>Content</div>
    </li>
    <li>
        <h4>Title</h4>
        <div>Content</div>
    </li>
</ul>

as inline-block хорошо поддерживается для ваших целевых браузеров.

Надеюсь, это полезно.

Редактировать: Более подробно рассмотрим ваш условный комментарий & hellip; вам не нужно повторять свойства, если они такие же, как в style.css. Хотя эта демонстрация не создает проблемы в точности, вы должны увидеть разницу, которую делает условный комментарий, то есть большой отступ, который появляется только в IE6 +.

...