bootstrap2中 row-fluid span的宽度是怎计算的,为什么IE会不同

zyjqjnh 发布于 2014/04/18 10:57
阅读 1K+
收藏 0
.row-fluid .span12{
    width: 100%;
    *width: 99.94680851063829%;
}

.row-fluid .span11 {
    width: 91.48936170212765%;
    *width: 91.43617021276594%;
}

.row-fluid .span10 {
    width: 82.97872340425532%;
    *width: 82.92553191489361%;
}

上述的百分比是如何计算的,为什么IE的宽度会有所不同



加载中
0
linsk1998
linsk1998

每列的宽度是由“间隙宽度”和“列数”计算出来的。

从你给的数据看“间隙宽度”定制修改过,列数为默认的12。

为了方便说明,我用w表示每列宽度,用g表示间隙宽度。

则有11*g+12*w=100% (视觉上)

你给的数据间隙宽度为大约是2.1276595744681014%

按照11*g+12*w=100%这个式子,

w=(1-0.06382978723404241*12)/11=0.06382978723404241

11格的宽度为10*g+11*w=0.9148936170212767

10格的宽度为9*g+10*w=0.8297872340425533

------------------------------------------------

至于IE67,bootstrap2只是为了避免在四舍五入计算时,恰好多数格子遇到.5进一导致总宽度超过容器,出现换行。于是按照一定值减小出现换行的几率。

就bootstrap2由于没有使用负margin,一个row里面只能装刚好12格。如果在content-box下使用bootstrap3的负margin思路,IE67的计算规则才会由于兼容性做比较大的改动。

OSCHINA
登录后可查看更多优质内容
返回顶部
顶部