在IE9中內容左對齊損壞

Question

我在IE9中正確對齊我的內容時遇到問題。我從來沒有像IE一樣，過去只是禁止從我的網站，但我現在需要它。我該如何解決這個問題，同時在Chrome中保持相同的感覺？

在這裏，你可以看到破碎的內容http://jordan.rave5.com/tmpstuff/index.html我嘗試了一些修復IE瀏覽器，但他們打破鉻。 ：\

第二個框，右側的導航欄中，假設位於左側的內容將被推送到導航欄下方。 ：\

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

Answer 2

嘗試的 '內容左' DIV的寬度設定爲固定寬度，而不是讓IE9弄明白本身。

實施例：

CSS：

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