Как преодолеть проблемы с дополнением IE7? - PullRequest
Новая
       21

Как преодолеть проблемы с дополнением IE7?

2 голосов
/ 22 февраля 2010

IE7 сводит меня с ума. Я знаю, что это мелочь, но я не знаю, что еще гуглить, и я знаю, что мне не хватает чего-то очень маленького. 

<div id="spotlightHolder">
<div id="spotlight">
    <div id="spotlightMessage">
        <h1 id="spotlightTitle">Lorem ipsum dolor sit amet.</h1>
        <p id="spotlightDescription">Lorem ipsum dolor, consectetur adipiscing elit. Curabitur massa mi, pharetra vitae luctus at, rutrum posuere quam. Integer pharetra tincidunt vehicula. Vestibulum nec purus id purus sodales hendrerit sit.</p>
        <a id="spotlightBotton" href="#" title="Click here to get our Special"></a>
    </div>
</div>
</div>

CSS для кода выше: 

div#spotlightHolder
{
    background:url(../images/below-menu-gradient.jpg) repeat-x;
    height:100%;
    padding:34px 0 0 0;
}

div#spotlight
{
    height:325px;
    background-color:#00aff0; /* Sky blue */
    background: rgb(0,175,240) url('../images/spotlight.jpg') no-repeat center center;
}

div#spotlightMessage
{
    width:550px;
    height:210px;
    /*margin:0 0 0 315px;*/
    /*padding:70px 0 0 315px;*/
    /*margin:0;*/
    padding-top:70px;
    padding-left:315px;
    text-align:left;
}

div#spotlightMessage p
{
    font-size:22px;
    font-weight:bolder;
    margin:0 0 10px 0;
}

div#spotlightMessage h1#spotlightTitle
{
    color:White;
    font-size:35px;
    margin:0 0 17px 0;
}

Результатом всего вышеперечисленного является то, что в IE7 текстовый блок внутри div id = spotlight расположен правее по сравнению с FF, Chrome, Safari или даже IE8. Может ли кто-нибудь заметить ошибку?

Спасибо, Гео

ПРИМЕЧАНИЯ. Я использую библиотеку YUI CSS Reset, поскольку вопрос SO предлагал это для аналогичной ошибки, но это не исправило ошибку.

ПРИМЕЧАНИЕ 2. Я использую тип документа: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

ВАЖНОЕ ПРИМЕЧАНИЕ:

Добавив margin-right: 400px к div # spotlightMessage на CSS, проблема IE7 была исправлена. Поскольку я не знаю, почему происходит такое поведение, я отмечу первым человеком, который дает объяснение с голосами, как принятый ответ. Спасибо за вашу помощь.

Ответы [ 5 ]

1 голос
/ 22 февраля 2010

Убедитесь, что у вас нет пробелов / символов перед объявлением doctpye.

Кроме того, это может быть что-то из-за коллапса на полях (но я не могу вам сказать прямо сейчас, я только что проснулся и сейчас я больше похож на зомби: D)

Однако вы не сказали нам, является ли страница действительной. У вас также могут быть вложенные элементы. Поэтому я думаю, что лучше всего поставить его в Интернете и дать нам ссылку:)

0 голосов
/ 23 февраля 2010

Мне действительно нравится план , чтобы сделать сброс CSS.

Это облегчает получение согласованного макета кросс-браузера и довольно широко используется.

0 голосов
/ 23 февраля 2010

Попробуйте инструмент сброса CSS Эрика Мейера вместо того, чтобы тратить время на то, чтобы сосредоточиться на причудах IE.

http://meyerweb.com/eric/tools/css/reset/

А почему бы не назначить ширину 550px .spotlightholder, чтобы она наследовалась?

0 голосов
/ 22 февраля 2010

На первый взгляд, ваш CSS выглядит нормально. Было бы полезно увидеть весь ваш CSS, особенно тот, который относится к телу, но, похоже, это проблема родительского элемента. Попробуйте установить фиксированную или процентную ширину для вашего div # spotlightHolder.

0 голосов
/ 22 февраля 2010

EDIT

Лучший способ исправить проблему, связанную только с IE (и есть много проблем только с IE, особенно в 6 + 7), это использовать «функцию» IE, которая позволяет вам условно включать информацию о стиле только для IE.

Описан с примером здесь: http://dustinbrewer.com/css-trick-target-only-ie-with-an-if-statement/

В предыдущей версии моего ответа указывалось на «быстрое исправление» для IE, которое включало бы только один элемент стиля в IE. Как было отмечено в комментариях, есть много причин, чтобы не делать это таким образом, единственный положительный момент в том, что он быстрый:

Предыдущая версия ответа следует

Я бы воспользовался взломом IE, чтобы исправить это, вот первая ссылка, которую я нашел об этом:

http://dustinbrewer.com/weekly-css-trick-the-ie-underscore-hack/

Обычно вы ставите подчеркивание перед атрибутом css, и только IE6 и IE7 будут использовать этот атрибут. Таким образом, вы можете сделать что-то вроде _right -34px, и это повлияет только на IE до версии 8.

или в этом случае измените его на 

  padding-left:315px;
  _padding-left:122px;

первый будет влиять на все остальные браузеры, а 2-й ряд будет каскадным только для IE

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...