Question

<!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一直移到左侧c ...那么任何人都可以帮助我..我想要一个没有dtd validator的解决方案

Answer 1

查看我的评论：

“但是在IE中我删除了DTD   验证器始终在左侧“ -   解决方案：不要删除doctype。

为什么要删除它？

您不应删除doctype，除非您没有其他选择。

如果确实无法绕过它（例如，您正在使用不使用doctype的大型旧网站 - 但在这种情况下似乎不太可能），您可以将它在IE Quirks Mode中添加了这个CSS：

body {
    text-align: center
}
#container {
    text-align: left
}

Answer 2

为什么要删除DTD声明？您的页面必须被分类为有效格式之一。如果您没有此声明，您的浏览器通常会采用不符合标准的怪癖模式。

不要忘记查看W3C Markup Validator

Answer 3

没有DTD导致浏览器恢复到“怪癖模式” - 这样做会导致他们使用旧版本的古怪实现，这些实现可能会有很大差异。使用（正确的）DTD会产生“标准模式”，使您在浏览器之间获得最大的一致性。

这里的问题不是DTD，而是CSS。

使用相同的方法将您用于容器的菜单居中：设置宽度并将左右边距设置为“自动”：

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

这是基于标准的，并得到很好的支持。

Answer 4

最好的办法是给菜单一些宽度，然后将边距设置为auto：

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

请在此处查看：http://jsfiddle.net/mrSmG/

IE中的HTML页面对齐问题（在没有DTD验证程序的情况下使用）

4 个答案: