IE 9中的宽度问题虽然它在Chrome，IE 7和＆amp; 8

Question

JSFIddle http://jsfiddle.net/cGadk/

Chrome 和 IE 7＆amp; 8

IE9

中的

HTML

<div class="container">
<div class="column">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
</div>
<div class="column">
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
</div>
<div class="column">
    <a href="#">9</a>
    <a href="#">10</a>
    <a href="#">11</a>
    <a href="#">12</a>
</div>
<div class="column">
    <a href="#">13</a>
    <a href="#">14</a>
    <a href="#">15</a>
    <a href="#">16</a>
</div>
<div class="column">
    <a href="#">13</a>
    <a href="#">14</a>
    <a href="#">15</a>
    <a href="#">16</a>
</div>

<div class="column">
    <a href="#">17</a>
    <a href="#">18</a>
    <a href="#">19</a>
    <a href="#">10</a>
</div>

CSS

a{
font-size:13px;
font-family : arial;
display : block;
border:1px solid black;
padding : 5px;
}

.column{
    float:left;
}

JS

(function($) {
   var width = 0;

   $('.column').each(function(i, el){
    width += $(el).width();
   });

    $('.container').width(width);
})(jQuery);

Answer 1

这是.container div的问题。它对IE9来说太小了。

如果您将JS代码从$('.container').width(width);更改为$('.container').width(width+10);，那么它看起来是正确的。

修改

我在IE9 rendering CSS tables differently than Chrome问题中找到了很好的解释这个问题以及一些可能的解决方法。