0

IE9 でコンテンツを正しく配置できません。私は IE が好きではなく、自分のサイトから禁止していましたが、今は必要です。Chrome で同じ感覚を維持しながら、これを修正するにはどうすればよいですか?

ここで壊れたコンテンツを見ることができますhttp://jordan.rave5.com/tmpstuff/index.html IE でいくつかの修正を試みましたが、Chrome で壊れます。:\

右側にナビゲーション バーがある 2 番目のボックスでは、左側にあるはずのコンテンツがナビゲーション バーの下に押し込まれています。:\

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-rightはwidth300pxなのでborder-left、1px合計幅は301px. したがって、では、 asの代わりにascontent-leftを指定する必要があります。margin-right301px300px

.content-left {
 height: auto;
 padding: 0;
 margin-right: 301px;
 vertical-align: top;
}
于 2013-04-28T10:00:29.917 に答える
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 に答える