添加Doctype销毁布局 [英] Adding Doctype Destroys Layout
问题描述
我一直在一个选项卡菜单，而不添加doctype语句。它在我的眼睛工作完美，但当我把<！DOCTYPE HTML PUBLIC - // W3C // DTD XHTML 1.0 Transitional // EN> 其他类型的Doctype，我的布局完全搞乱。以下是描述
I have been working on a tab menu without adding the doctype statement. It works perfectly in my eyes but when I do place the <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> or any other type of Doctype, my layout completely messes up. Below are three pictures which describe
1的三张图片。）Expanded Window（无doctype）
2。）合同窗口（无doctype）
3。）合同窗口（WITH doctype）
我使用：之后 滑动门的右侧带有代码片段：
I'm using the :after pseudo to place the right side of the "sliding door" with the code snippet:
#nav li:after {
width:10px;
content:"";
background: url('tabRight.png');
position:absolute;
height:100%;
top:0;
right:-10;
}
我对web开发很新鲜，所以我不知道可以导致这。任何帮助，在这一点，将不胜感激。谢谢！
I'm pretty new to web development so I have no idea what could be causing this. Any help at this point would be appreciated. Thanks!
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>
EDIT：
$ c> right：-10; 是导致问题的原因。如果我设置 right：0; 布局被恢复，然而这使得滑动门不适合我。来自右滑动门的透明边缘在与左滑动门重叠时显示灰色背景，这不是我想要的。
The right:-10; is causing the problem. If I set right:0; The layout is restored, however then this makes the "sliding doors" not work for me. The transparent edge from the right sliding door shows the grey background when it overlaps the left sliding door, which is not what I want.
推荐答案
No doctype == quirks mode。有时，怪癖/严格模式中的布局行为会大幅不同。
No doctype == quirks mode. The layout behavior in the quirks/strict modes at times differs drastically.
这篇关于添加Doctype销毁布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
