添加Doctype销毁布局

本文介绍了添加Doctype销毁布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一直在一个选项卡菜单，而不添加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>&nbsp;&nbsp;About</li>
    <li>&nbsp;&nbsp;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.

quirks