2

JSFIddle はこちらhttp://jsfiddle.net/cGadk/

ChromeおよびIE 7 & 8で

クロム ビュー

IE9で

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>

</p>

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

</p>

4

1 に答える 1

1

.containerdivの問題です。IE9には小さすぎます。

JS コードを から に変更する$('.container').width(width);と、$('.container').width(width+10);正しく表示されます。

編集

この問題の素晴らしい説明と、Chrome の質問とは異なる CSS テーブルをレンダリングする IE9のいくつかの潜在的な修正を見つけました。

于 2012-12-25T13:18:46.987 に答える