IE8 против IE7 HTML-форматирование - PullRequest
Новая
       13

IE8 против IE7 HTML-форматирование

2 голосов
/ 23 марта 2011

Я боролся за то, чтобы элемент контейнера div центрировался вместе с его дочерним содержимым, и это начинает разочаровывать. У меня есть встроенный стиль для div: 

    <body id="body1" style="vertical-align: middle; text-align: center">
        <div id="container" style="position: relative; width: 910px; margin: 0px auto;">
             <!---Child Content--->      
    .
    .
.
</div>
    </body>

Когда эти настройки просматриваются в IE7, контейнер div смещается вправо, как показано на рисунке ниже:

enter image description here

Чтобы отцентрировать его, я должен добавить определение правильного свойства в его стиле позиции, чтобы подтолкнуть его к центру: 

    <body id="body1" style="vertical-align: middle; text-align: center">
        <div id="container" style="position: relative; right: 425px; width: 910px; margin: 0px auto;">
<!---Child Content--->      
        .
        .
    .
        </div>
    </body>

Это исправляет проблему для IE7:

enter image description here

Как и следовало ожидать, форматирование отключено в IE8, Firefox, Chrome и т. Д. При применении второго описанного выше стиля:

Firefox (такое же поведение в Chrome и IE8)

enter image description here

Надеюсь, это простое исправление, я не понимаю, почему IE7 по-разному относится к стилю. Любая помощь приветствуется.

UPDATE:

@ Дэн Харди, по течению - если бы я мог принять оба ваших ответа, я бы, спасибо, ребята, это сработало. Это очень странное поведение, я решил, что теперь мне не придется обслуживать определенные браузеры.

Ответы [ 3 ]

2 голосов
/ 23 марта 2011

Это прокладывает путь для исправления, но не является строго исправлением:

Вы можете добавить условные выражения для браузера в свой HTML-код:

http://css -tricks.com/how-to-create-an-ie-only-stylesheet/

В основном, что вы можете сделать, это добавить комментарий ниже на свою страницу: 

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="conditional_ie_7_stylesheet.css" />
<![endif]-->

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

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

1 голос
/ 23 марта 2011

Если вы поставите !ie7 после атрибута ширины, он будет игнорироваться браузерами, отличными от IE 7:

right: 425px !ie7;

Для лучшего объяснения этого см. Этот SOвопрос и принятый ответ:

Взрыв IE7 - Что это значит?

Я оставляю вам решать, слишком ли это «хакерски», но этоиспользуется в переполнении стека css.

0 голосов
/ 23 марта 2011

Был в состоянии получить HTML в исходном вопросе, чтобы нормально работать в IE7, когда вы удалите position: relative из div. Существует также вероятность того, что в содержимом html / css есть взаимодействия, которые вызывают основную проблему, поэтому, если это не решит проблему, вы можете опубликовать имеющийся у вас контент html / css, который демонстрирует проблему на снимках экрана, которые будут полезно.

...