0

我无法在 IE9 中正确对齐我的内容。我从不喜欢 IE，过去只是从我的网站上禁止它，但我现在需要它。如何在 Chrome 中保持相同感觉的同时解决此问题？

在这里您可以看到损坏的内容http://jordan.rave5.com/tmpstuff/index.html我尝试了一些针对 IE 的修复，但它们在 chrome 中中断。:\

第二个框，导航栏在右边，应该在左边的内容被推到导航栏下面。:\

HTML

<div class="large-box">
    <div class="large-box-content">
        <div class="content-right">
            <div class="column-header">
                <div class="column-icon">
                    Title here
                </div>
            </div>
            <p>Some content here...</p>
            <p>Some content here...</p>
            <p>Some content here...</p>
            <p>Some content here...</p>
            <div class="column-header">
                <div class="column-icon">
                    Title here
                </div>
            </div>
            <p>Some content here...</p>
            <p>Some content here...</p>
            <p>Some content here...</p>
            <p>Some content here...</p>
        </div>
        <div class="content-left">
            <div class="column-header">
                <div class="column-icon">
                    Title here
                </div>
            </div>
            <p>Some content here...</p>
            <p>Some content here...</p>
            <p>Some content here...</p>
            <p>Some content here...</p>
            <p>Some content here...</p>
            <p>Some content here...</p>
            <div class="column-header">
                <div class="column-icon">
                    Title here
                </div>
            </div>
            <p>Some content here...</p>
            <p>Some content here...</p>
        </div>
    </div>
</div>

CSS

.large-box {
    display: block;
    transition: height 2s;
    -webkit-transition: height 2s;
    width: 74%;
    min-width: 990px;
    height: 100%;
    margin: 20px auto 20px;
    background-image: url(images/nav-trans.png);
    background-repeat: repeat;
    border: 1px solid #242f3e;
     -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0px 0px 14px #121417;
    -webkit-box-shadow: 0px 0px 14px #121417;
    box-shadow: 0px 0px 14px #121417;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=14, Direction=0, Color='#121417')";
    overflow-x: hidden;
}

.large-box:after {
    content:'';
    display:block;
    clear:both;
}

.large-box-content {
    height: 100%;
}

.content-right {
    float: right;
    width: 300px;
    height: auto;
    padding: 0;
    margin-left: 0;
    vertical-align: top;
    background-image: url(images/blue-trans.png);
    background-repeat: repeat;
    border-left: 1px solid #1b232e;
    -webkit-box-shadow: -5px 0px 3px rgba(18, 25, 39, 0.10);
    -moz-box-shadow: -5px 0px 3px rgba(18, 25, 39, 0.10);
    box-shadow: -5px 0px 3px rgba(18, 25, 39, 0.10);
}

.content-left {
    height: auto;
    padding: 0;
    margin-right: 300px;
    vertical-align: top;
}
4

2 回答 2

1

尝试将 'content-left' div 的宽度设置为固定宽度，而不是让 IE9 自己解决。

例子：

CSS：

.content-left {
    height: auto;
    margin-right: 300px;
    padding: 0;
    vertical-align: top;
    width: 1105px;
}
于 2013-04-28T09:19:01.117 回答
1

您content-right的宽度width为 300 像素，border-left因此1px总宽度为301px. 所以在 中content-left，你需要给margin-rightas301px而不是300px。

.content-left {
 height: auto;
 padding: 0;
 margin-right: 301px;
 vertical-align: top;
}
于 2013-04-28T10:00:29.917 回答