Question

我一直在使用标签菜单而不添加doctype语句。它在我眼中完美运行但是当我放置<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">或任何其他类型的Doctype时，我的布局完全混乱。以下是描述

的三张照片

1.) Expanded Window (without doctype)

2.) Contracted Window (without doctype)

3.) Contracted Window (WITH doctype)

enter image description here

我正在使用:after伪将“推拉门”的右侧放在代码段中：

#nav li:after {
    width:10px;
    content:"";
    background: url('tabRight.png');
    position:absolute;
    height:100%;
    top:0;
    right:-10;
}

我对网络开发很陌生，所以我不知道是什么导致了这一点。在这一点上的任何帮助将不胜感激。谢谢！

HTML：

<div id="nav">
<ul>
    <li id="dead">
        <a href='javascript: toggle()'>
            <div script="padding-left:5px;">
                <img class="navImg" src="dead32.png" />
                <p class="navTxt">Deadlines</p>
            </div>
        </a>
    </li>
    <li>&nbsp;&nbsp;About</li>
    <li>&nbsp;&nbsp;Address</li>
</ul>
</div>

编辑：

right:-10;导致问题。如果我设置right:0;布局已恢复，那么这会使“滑动门”对我不起作用。右侧滑动门的透明边缘在与左侧滑动门重叠时显示灰色背景，这不是我想要的。

enter image description here

Answer 1

没有doctype ==怪癖模式。 quirks/strict modes中的布局行为有时会有很大差异。

Answer 2

如果您已编写代码和css而未在标题中添加DOCTYPE。这意味着默认情况下您的浏览器处于怪异模式，这意味着浏览器不知道如何呈现元素。总是有必要在标题中添加doctype，因为像IE这样的浏览器会搞乱整个布局。

我的建议是添加doctype transitional并启动代码/ css，这将适合您，它将始终有助于解决浏览器兼容性问题。

以下是Dream Weaver在您创建新HTML模板时创建的示例。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

Answer 3

文档类型定义定义了浏览器必须如何解释某些标记。 XHTML作为基于XML的标记语言非常严格，需要您适当地打开和关闭标记（也区分大小写）。

可能您的网站没有遵循严格的DTD规则，因此显示的差异。

Answer 4

根据我的评论，我建议添加一个严格的DTD（你总是应该这样做）和代码。此外，使用CSS重置选择器总是一个很好的经验法则

*{
   margin: 0;
   padding: 0;
 }

添加Doctype销毁布局

编辑：

4 个答案: