Проблема выравнивания HTML-страницы в IE (при использовании без валидатора DTD) - PullRequest
0 голосов
/ 21 февраля 2011
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >

<body>
<div id="container"> 
<div id="menu"> 
    <ul> 
        <li><a >page1</a></li> 
        <li><a >page2</a></li> 
        <li><a >page3</a></li>            
    </ul> 
</div>
</div> 
</body> 
</html> 

и вот мой css

<style>
#menu {
    margin: 0px 10px 10px 10px;
    overflow: hidden;
    font-size: 13px;
    font-weight: bold;
}

#menu ul {
    margin: 0;
    padding: 0;
}

#menu ul li {
    margin: 0px 2px;
    display: inline;
    vertical-align: middle;
    text-align: center;
}


#container {
    width: 785px;
    margin: 0 auto;
    background-color: #fff;
    padding-top: 6px;
    padding-bottom: 10px;
}

</style>

Я хочу, чтобы меню было в середине страницы .. Но в IE, если я удаляю DTD validator, оно всегда налевый с .. кто-нибудь может мне помочь .. я хочу решение без dtd validator

Ответы [ 4 ]

2 голосов
/ 21 февраля 2011

Смотрите мой комментарий:

"Но в IE, если я удалю DTD валидатор всегда слева "- Решение: не удаляйте doctype.

Почему вы хотите удалить его?

Вы не должны удалять тип документа, если у вас нет другого выбора .

Если на самом деле никак не обойтись (например, вы работаете с большим унаследованным сайтом, который не использует doctype - однако в этом случае это маловероятно), вы можете отцентрировать его в IE Причудливый режим , добавив этот CSS:

body {
    text-align: center
}
#container {
    text-align: left
}
1 голос
/ 21 февраля 2011

Отсутствие DTD приводит к тому, что браузеры возвращаются в «режим причуд» - это заставляет их использовать причудливые реализации своих старых версий, которые могут сильно различаться.Использование (правильного) DTD приводит к «стандартному режиму», который обеспечивает максимальную согласованность между браузерами.

Проблема здесь не в DTD, а в CSS.

Используйте тот же методцентрирование вашего меню, которое вы используете для контейнера: установите ширину и установите для левого и правого полей значение 'auto':

<style>
#menu { margin:0 auto ; width:500px ; }
</style>

Это основано на стандартах и ​​хорошо поддерживается.

1 голос
/ 21 февраля 2011

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

#menu {
  width: 200px;
  margin:auto auto;
}

Проверьте это здесь: http://jsfiddle.net/mrSmG/

1 голос
/ 21 февраля 2011

Почему вы хотите удалить объявление DTD?Ваша страница должна быть классифицирована в одном из допустимых форматов.Если у вас нет этого объявления, ваш браузер обычно переходит в режим причуд, который на самом деле не соответствует стандартам.

Не забудьте взглянуть на W3C Markup Validator

...