Question

我无法在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;
}

Answer 1

尝试将'content-left'div的宽度设置为固定宽度，而不是让IE9自行计算出来。

示例：

<强> CSS：

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

Answer 2

您的content-right width为{300}，border-left为1px，因此总宽度为301px。因此，在content-left中，您需要将margin-right设为301px而不是300px。

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

内容在IE9中左对齐

2 个答案: