当前位置: 代码迷 >> Web前端 >> Blueprint_一个bug及修补_push-x
  详细解决方案

Blueprint_一个bug及修补_push-x

热度:157   发布时间:2012-11-10 10:48:50.0
Blueprint_一个bug及修复_push-x

最近有时间关注并学习开源的CSS框架:Blueprint,现在的版本还在0.9,不可能十全十美。

?

发现一个bug,push-x,这个class不能正常工作。

本来仅仅想把bug报告一下算了,但是想何不自己解决一下,再报告上去。

?

源码:

.push-1 { margin: 0 -40px 1.5em 40px; }
.push-2 { margin: 0 -80px 1.5em 80px; }
.push-3 { margin: 0 -120px 1.5em 120px; }
.push-4 { margin: 0 -160px 1.5em 160px; }
.push-5 { margin: 0 -200px 1.5em 200px; }
.push-6 { margin: 0 -240px 1.5em 240px; }
.push-7 { margin: 0 -280px 1.5em 280px; }
.push-8 { margin: 0 -320px 1.5em 320px; }
.push-9 { margin: 0 -360px 1.5em 360px; }
.push-10 { margin: 0 -400px 1.5em 400px; }
.push-11 { margin: 0 -440px 1.5em 440px; }
.push-12 { margin: 0 -480px 1.5em 480px; }
.push-13 { margin: 0 -520px 1.5em 520px; }
.push-14 { margin: 0 -560px 1.5em 560px; }
.push-15 { margin: 0 -600px 1.5em 600px; }
.push-16 { margin: 0 -640px 1.5em 640px; }
.push-17 { margin: 0 -680px 1.5em 680px; }
.push-18 { margin: 0 -720px 1.5em 720px; }
.push-19 { margin: 0 -760px 1.5em 760px; }
.push-20 { margin: 0 -800px 1.5em 800px; }
.push-21 { margin: 0 -840px 1.5em 840px; }
.push-22 { margin: 0 -880px 1.5em 880px; }
.push-23 { margin: 0 -920px 1.5em 920px; }
.push-24 { margin: 0 -960px 1.5em 960px; }

.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float: right; position:relative; }

?

bug位置:红色标记。

bug特征:

1. float: right; 由于这个原因导致push-x会从最右侧再向后面移动x个grid

2. margin: 0 -40px 1.5em 40px; ? 导致向右侧移动x个grid之后,自己的原有位置没有全部 让出来

3. 1.5em 导致行距增加

?

解决方法:

1. float: left ;

2. margin: 0 -40px 1.5em 40px; 更改作margin: 0 - 80px 1.5em 40px; ?

??? position:relative; 40px使得自己margin-left增加了x个grid;

??? 相对定位后,自己仍旧占有原来的位置;

??? 所以最后,应该让右边的对象移如自己占位的地方,所以是 (x+1)*40,而不是x*40。

?

3. 1.5em 导致行距增加

??? 这个不清楚Blueprint为啥弄个1.5,改作0就可以了。

?

css也是需要测试的。也需要考虑各种边界情况,比如右边有占位对象,没有占位对象,空余位置够不够等。

?

?

?

  相关解决方案