我一直在使用标签菜单而不添加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)
我正在使用: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> About</li>
<li> Address</li>
</ul>
</div>
right:-10;
导致问题。如果我设置right:0;
布局已恢复,那么这会使“滑动门”对我不起作用。右侧滑动门的透明边缘在与左侧滑动门重叠时显示灰色背景,这不是我想要的。
答案 0 :(得分:8)
没有doctype ==怪癖模式。 quirks/strict modes中的布局行为有时会有很大差异。
答案 1 :(得分: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>
答案 2 :(得分:0)
文档类型定义定义了浏览器必须如何解释某些标记。 XHTML作为基于XML的标记语言非常严格,需要您适当地打开和关闭标记(也区分大小写)。
可能您的网站没有遵循严格的DTD规则,因此显示的差异。
答案 3 :(得分:0)
根据我的评论,我建议添加一个严格的DTD(你总是应该这样做)和代码。此外,使用CSS重置选择器总是一个很好的经验法则
*{
margin: 0;
padding: 0;
}