0

我有一个通过 iframe 加载内容的侧边栏。在 safari 中一切看起来都很好，但在 chrome 和 firefox 中，.contentdiv 向右射击，但我似乎无法确定为什么会发生这种情况。

边栏.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>

侧边栏.css：

html, body {height:100%; margin:0; padding:0;}
#sidebar {
    position:fixed;
    top:0;
    bottom:0;
    overflow:auto;
    text-align: center;
    width: 20em;
    z-index:2;
    color: #ffffff;
    background-color: #303030;
    -moz-box-shadow: inset -30px 0 30px -10px #222;
    -webkit-box-shadow: inset -30px 0 30px -10px #222;
    box-shadow: inset -30px 0 30px -10px #222;
    -webkit-transition:margin 1s ease-in;
    -moz-transition:margin 1s ease-in;
    -ms-transition:margin 1s ease-in;
    transition:margin 1s ease-in;
    white-space: nowrap;
}


.nav{
    display:table;
    height:100%;
    table-layout:fixed;
    width:3em;
    float: right;
    background-color: #2a2a2a;
    border-left: 2px groove #454545;    
    -moz-box-shadow: inset -10px 0 10px -10px #000;
    -webkit-box-shadow: inset -10px 0 10px -10px #000;
    box-shadow: inset -10px 0 10px -10px #000;
}

.content {
    height:100%;
    position: fixed;
    width: 16.875em;
    float: right;
    display:inline-block;
    color:#eee;
    font-family: "Georgia", Sans-Serif;
}

.content iframe{
    width: 100%;
    height:100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.top, .bottom, .middle {
    width:3em;
    display:table-cell;
    text-align: center;
}

.top{vertical-align:top;}
.middle {vertical-align:middle;}
.bottom{vertical-align:bottom;}
.top,.bottom{height:1px}


.tr{display:table-row}

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

#sidebar .nav li {
    padding: .5625em;
    list-style:none;
    position: relative;
}
#sidebar .nav li img {
    height: 1.875em;
    width: 1.875em
}

#sidebar .nav li:before {
    content: "";
    position: absolute;
    left:0;
    top:0;
    height: 100%;
    width: 3px;
    background:white;
    visibility: hidden;
}

#sidebar .nav li.link:hover:before, #sidebar .nav li.current:before {
    visibility: visible;
}

#sidebar .nav .top li { border-bottom: 2px groove #454545 }
#sidebar .nav .bottom li { border-top:  2px groove #454545 }

#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%; 
    list-style:none;
    letter-spacing: 0.2em;
    font-size: .9em;
    background: -moz-linear-gradient(left, rgba(58,58,58,0) 0%, rgba(58,58,58,0.57) 20%, rgba(58,58,58,1) 35%, rgba(58,58,58,1) 65%, rgba(58,58,58,0.57) 80%, rgba(58,58,58,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(58,58,58,0)), color-stop(20%,rgba(58,58,58,0.57)), color-stop(35%,rgba(58,58,58,1)), color-stop(65%,rgba(58,58,58,1)), color-stop(80%,rgba(58,58,58,0.57)), color-stop(100%,rgba(58,58,58,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(58,58,58,0) 0%,rgba(58,58,58,0.57) 20%,rgba(58,58,58,1) 35%,rgba(58,58,58,1) 65%,rgba(58,58,58,0.57) 80%,rgba(58,58,58,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(58,58,58,0) 0%,rgba(58,58,58,0.57) 20%,rgba(58,58,58,1) 35%,rgba(58,58,58,1) 65%,rgba(58,58,58,0.57) 80%,rgba(58,58,58,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(58,58,58,0) 0%,rgba(58,58,58,0.57) 20%,rgba(58,58,58,1) 35%,rgba(58,58,58,1) 65%,rgba(58,58,58,0.57) 80%,rgba(58,58,58,0) 100%); /* IE10+ */
    background: linear-gradient(to right, rgba(58,58,58,0) 0%,rgba(58,58,58,0.57) 20%,rgba(58,58,58,1) 35%,rgba(58,58,58,1) 65%,rgba(58,58,58,0.57) 80%,rgba(58,58,58,0) 100%); /* W3C */
}

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

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



#dummy-column {
    width: 20em;
    float:left;
    height:100px;
    position:relative;
    -webkit-transition:margin 1s ease-in;
    -moz-transition:margin 1s ease-in;
    -ms-transition:margin 1s ease-in;
    transition:margin 1s ease-in;
}
/*to account for scrollbars - better make javascript backup*/
/*if hasScrollbar width =+ scrollbarWidth*/
@media all and (max-height: 37.1em) { 
    #sidebar{width:20.9375em;}
    #dummy-column{width:20.9375em;}
}

内容.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>

内容.css：

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;}

关于为什么.content会在 chrome 和 firefox 而不是 safari 中向一边射击的任何想法？

这是正确渲染的屏幕截图：http: //img818.imageshack.us/img818/716/screenshot20130504at113.png

4

1 回答 1

1

我不确定我是否遇到了问题，但尝试text-align: center;从#sidebar.sidebar.css

Have a look at the fiddle

于 2013-05-04T13:56:15.657 回答