IE9 中的可选右栏

Question

我有以下内容：

.container {
    background-color: whitesmoke;
    display: table;
    width: 100%;        
    height: 150px;        
    margin: 10px;
}
.main {
    background-color: lightblue;
    display: table-cell;
    width: 100%;        
}
.right-content {
    background: lightcoral;
    margin-left: 16px;        
    width: 250px;
}
.topb {
    border-top: 2px solid #aaa;
}

<div class="container">
 <div class="main topb">This is the <b>main</b> content</div>
 <div class="right">
  <!-- -->
  <div class="right-content topb">Optional content</div>
  <!-- -->
 </div>
</div>

条件如下：

1) main和right总是在同一行；
2) 如果没有(dynamic) div right-content, main 会占用所有宽度(100%);
3) main和right-content之间有16px的左边距（如果有的话）；

4*) 页面应该在 IE 9 中正确显示...

使用display:flex可能会很划算，但在IE9中不受支持（兼容性视图可能会通过，但在真正的IE9中不会）...请建议如何使此代码与此版本兼容"rebel"（浏览器。

Answer 1

您需要添加一些 jquery 才能实现此目的。

 $(document).ready(function(){
   if ($(".right-content").text().length > 0) {
     $('.right').show();
   } else{
     $('.right').hide();  
   }

这是更新后的 fiddle file

希望这能解决您的问题。

IE9 中的可选右栏

Optional right column in IE9

html

css

internet-explorer

internet-explorer-9