2014-10-28 117 views
3

我有包括细胞输入表的Internet Explorer 9,选择/取消错误

有奇怪的错误(在IE9中,我并没有在其他测试IE浏览器版本)之间移动后(或之后选择/取消选择)表 - 表的父div开始扩大,如果溢出:自动;属性设置好的,如果有水平滚动

它的样子:

enter image description here

Link to sample尝试在表中选择一些行

HTML:

<div class="maindiv"> 
    <div class="gridwrapper"> 
     <table> 
      <thead> 
       <tr> 
        <th>Column</th> 
        <th>Column</th> 
        <th>Column</th> 
        <th>Column</th> 
        <th>Column</th> 
        <th>Column</th> 
        <th>Column</th> 
        <th>Column</th> 
        <th>Column</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td><input type='text' value='Cell'/></td> 
        <td><input type='text' value='Cell'/></td> 
        <td><input type='text' value='Cell'/></td> 
        <td><input type='text' value='Cell'/></td> 
        <td><input type='text' value='Cell'/></td> 
        <td><input type='text' value='Cell'/></td> 
        <td><input type='text' value='Cell'/></td> 
        <td><input type='text' value='Cell'/></td> 
        <td><input type='text' value='Cell'/></td> 
       </tr> 
       <tr> 
        <td><input type='text' value='Cell'/></td> 
        <td><input type='text' value='Cell'/></td> 
        <td><input type='text' value='Cell'/></td> 
        <td><input type='text' value='Cell'/></td> 
        <td><input type='text' value='Cell'/></td> 
        <td><input type='text' value='Cell'/></td> 
        <td><input type='text' value='Cell'/></td> 
        <td><input type='text' value='Cell'/></td> 
        <td><input type='text' value='Cell'/></td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
    <div class="bottomdiv"> 
     <label>AddRow</label> 
    </div> 
</div> 

CSS:

.gridwrapper { 
    max-height: 150px; 
    overflow: auto; 
    border: 1px solid black; 
} 
.maindiv { 
    width: 400px; 
    border: 1px solid gray; 
} 
table { 
    width: 100%; 
} 

有人知道如何解决这个问题?

+0

不幸的是我不能重现这个bug。 – dude 2014-10-29 20:18:46

回答

0

最小高度:0%;修复ie9中的这个bug

.gridwrapper { 
    min-height: 0%; 
    max-height: 150px; 
    overflow: auto; 
    border: 1px solid black; 
} 
0

当溢出属性设置为auto时,我在IE9中看到此行为。但是,当该属性设置为滚动时,我无法在IE中重现该行为。

尝试这种情况:

.gridwrapper { 
    max-height: 150px; 
    overflow: scroll; 
    border: 1px solid black; 
} 
+0

谢谢你的回答!但我认为在设计方面 - 这不是最好的解决方案:( – Sibay 2014-11-05 08:18:02