Html firefox、chrome和；很有可能是ie_Html_Css_Iframe

Html firefox、chrome和；很有可能是ie

html css iframe

Html firefox、chrome和；很有可能是ie,html,css,iframe,Html,Css,Iframe,我有一个侧边栏，它通过iframe加载内容。在safari中，一切看起来都很好，但在chrome和firefox中，.contentdiv向右侧突出，但我似乎无法确定为什么会发生这种情况 sidebar.html： <body> <div id="sidebar" class="open"> <div class="nav"> <div class="tr">

我有一个侧边栏，它通过iframe加载内容。在safari中，一切看起来都很好，但在chrome和firefox中，

.content

div向右侧突出，但我似乎无法确定为什么会发生这种情况

sidebar.html：

<body>
<div id="sidebar" class="open">
        <div class="nav">
                <div class="tr">
                        <div class="top">
                                <ul>
                                    <li class="link"><img src="_images/attributes/user.svg"></li>
                                    <li class="link"><img src="_images/attributes/contribute.svg"></li>
                                    <li class="link"><img src="_images/attributes/attribute2.svg"></li>
                                    <li class="link"><img src="_images/attributes/attribute2.svg"></li>
                                    <li class="link"><img src="_images/attributes/attribute2.svg"></li>
                                    <li class="link"><img src="_images/attributes/attribute2.svg"></li>
                                </ul>
                        </div>
                </div>
                <div class="tr">
                        <div class="middle">
                        </div>
                </div>
                <div class="tr">
                        <div class="bottom">
                                <ul>
                                    <li class="link"><img src="_images/attributes/attribute2.svg"></li>
                                    <li class="link"><img src="_images/attributes/attribute2.svg"></li>
                                    <li class="link"><img src="_images/attributes/attribute2.svg"></li>
                                    <li class="link"><img src="_images/attributes/attribute2.svg"></li>
                                    <li class="current"><img src="_images/attributes/attribute2.svg"></li>
                                </ul>
                        </div>
                </div>
        </div>
        <div class="content">
            <iframe src="content.html" frameBorder="0"></iframe>
            </ul>
        </div>
</div>

<div id="dummy-column"></div>
</body>

content.html：

<body>
<div id="sidebar">

        <div class="content">
            <p class="title">MISSION CONTROL</p>
            <ul>
                <li class="heading">Recent Changes</li>
                <li class="sub-menu"><ul>
                    <li>Content Sub-Menu</li>
                    <li>Content Sub-Menu</li>
                    <li>Content Sub-Menu</li>
                </ul></li>
                <li class="heading">Formatting</li>
                <li class="sub-menu"><ul>
                    <li>Content Sub-Menu</li>
                    <li>Content Sub-Menu</li>
                    <li>Content Sub-Menu</li>
                </ul></li>
                <li class="heading">Categorise</li>
                <li class="sub-menu"><ul>
                    <li>Content Sub-Menu</li>
                    <li>Content Sub-Menu</li>
                    <li>Content Sub-Menu</li>
                </ul></li>
                <li class="heading">Categorise</li>
                <li class="sub-menu"><ul>
                    <li>Content Sub-Menu</li>
                    <li>Content Sub-Menu</li>
                    <li>Content Sub-Menu</li>
                </ul></li>
            </ul>
        </div>
</div>

关于为什么

.content

会在chrome和firefox中被攻击而不是safari，你有什么想法吗

以下是正确渲染的屏幕截图：

我不确定是否有问题，但尝试删除

文本对齐：居中来自侧栏.css
中的#侧栏


<body>
<div id="sidebar">

        <div class="content">
            <p class="title">MISSION CONTROL</p>
            <ul>
                <li class="heading">Recent Changes</li>
                <li class="sub-menu"><ul>
                    <li>Content Sub-Menu</li>
                    <li>Content Sub-Menu</li>
                    <li>Content Sub-Menu</li>
                </ul></li>
                <li class="heading">Formatting</li>
                <li class="sub-menu"><ul>
                    <li>Content Sub-Menu</li>
                    <li>Content Sub-Menu</li>
                    <li>Content Sub-Menu</li>
                </ul></li>
                <li class="heading">Categorise</li>
                <li class="sub-menu"><ul>
                    <li>Content Sub-Menu</li>
                    <li>Content Sub-Menu</li>
                    <li>Content Sub-Menu</li>
                </ul></li>
                <li class="heading">Categorise</li>
                <li class="sub-menu"><ul>
                    <li>Content Sub-Menu</li>
                    <li>Content Sub-Menu</li>
                    <li>Content Sub-Menu</li>
                </ul></li>
            </ul>
        </div>
</div>

html, body { margin:0; padding:0; height:100%; overflow-x:hidden}
#sidebar {
    text-align: center;
    width: 16.875em;
    color: #ffffff;
    background-color: #333333;
}


.content {
    width: 16.875em;
    display:inline-block;
    color:#fff;
}


#sidebar ul {margin:0; padding: 0;}


#sidebar .content li {
    min-height: 4em; 
    vertical-align: middle;
    border-bottom: 2px groove #454545; 
    line-height: 4em; 
    text-shadow: 2px 2px 2px #000; 
    width: 100%; 
    z-index: 3;
    list-style:none;
    letter-spacing: 0.15em;
    font-size: 1em;
    font-style: italic; 
    background: #333;
    z-index: 1;
    position: relative;
}

#sidebar .content .sub-menu li {
    font-size: .8em;
    min-height: 4em;
    line-height: 4em;
    text-shadow: 1px 1px 1px #000;
    border-bottom: 2px ridge #454545;
    margin: 0;
    width:100%;
    background: #2d2d2d;
    font-style: normal;
}


#sidebar .content p.title {
    font-size: .95em;
    min-height: 5em;
    line-height: 5em;
    text-shadow: 2px 2px 2px #000;
    border-bottom: 2px ridge #454545;
    margin: 0;
    width: 100%;
    z-index: 100;
    box-shadow: 0 1em 1em -1em #1a1a1a; 
    z-index: 3;
    position: relative; 
    letter-spacing: .2em;
    background: #393939;
    }

#sidebar .content li.heading {
    z-index: 2;
    position: relative;
    text-align:left;
    padding-left: 1em;
}


#sidebar .content .sub-menu li:last-child {border-bottom: none;}