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