CSS样式很麻烦，清理和代码少

Question

嘿，我有一些像这样的CSS代码：

/* ROW 1 (1-8) */
#rsvpBadge0{position: absolute; top: -2px; left: -1px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge1{position: absolute; top: -2px; left: 74px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge2{position: absolute; top: -2px; left: 149px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge3{position: absolute; top: -2px; left: 224px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge4{position: absolute; top: -2px; left: 299px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge5{position: absolute; top: -2px; left: 374px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge6{position: absolute; top: -2px; left: 449px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge7{position: absolute; top: -2px; left: 524px; z-index: 2; width: 50px; height: 50px;}
/* ROW 2 (9-16) */
#rsvpBadge8{position: absolute; top: 68px; left: -1px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge9{position: absolute; top: 68px; left: 74px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge10{position: absolute; top: 68px; left: 149px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge11{position: absolute; top: 68px; left: 224px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge12{position: absolute; top: 68px; left: 299px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge13{position: absolute; top: 68px; left: 374px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge14{position: absolute; top: 68px; left: 449px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge15{position: absolute; top: 68px; left: 524px; z-index: 2; width: 50px; height: 50px;}

等等......

现在我有同样的方式从1到207。它可以工作，但我看到的问题是它在FireFox看起来很好（顶部和左侧坐标是点上）但当我在IE和Chrome中查看它时，它们有点偏离最高值（需要再提高一点）

所以我的问题是：

1）我如何知道每个rsvpBadge有不同的数字和最高值来缩短代码？

2）纠正IE和Chrome的坐标，而不必为每个浏览器再制作3到1-209层。

这是一个视觉

左侧是Chrome中的样子，右侧是FireFox。

Answer 1

浮动这些元素似乎是合适的：

.rsvp-badge{z-index: 2; width: 50px; height: 50px;float:left;}

完成此操作后，将clear:left;添加到开始一行的每个元素。

更好：将所有元素放在一个固定宽度的容器中，这样每行可以容纳8个元素。

更新

A-公顷！所以那是 rsvp-badge应该是什么。

你可以通过几条规则using pseudo-elements逃脱：

<div class="user-photo has-rsvpd"></div>
<div class="user-photo"></div>

.user-photo {
    /*size,background etc. ommited*/
    position:relative;/*to allow position:absolude on pseudo-element*/
}
.has-rsvpd:after {
     /*size,background etc. ommited*/
     content:"";position:absolute;top:0;left:0;/*apply to top left corner*/
}

或restructuring HTML a bit（根据结构，可能在运行时适用）：

<div class="user-photo has-rsvpd"><span class="rsvp-badge"></span></div>
<div class="user-photo"><span class="rsvp-badge"></span></div>

.rsvp-badge {
     display:none;/*hide when user has not rsvpd*/
}
.has-rsvpd .rsvp-badge{
     /*same as :after in the sample above, but without a content property*/
}

Answer 2

如果您不想使用javascript或浮动，可以更改html吗？然后向元素添加类，因为（而不是id）类不必是唯一的，例如：

<div class="rsvpBadgeAll rsvpBadgeLeft0 rsvpBadgeTop0">...</div>
<div class="rsvpBadgeAll rsvpBadgeLeft1 rsvpBadgeTop0">...</div>
...
<div class="rsvpBadgeAll rsvpBadgeLeft7 rsvpBadgeTop0">...</div>
<div class="rsvpBadgeAll rsvpBadgeLeft0 rsvpBadgeTop1">...</div>
...
<div class="rsvpBadgeAll rsvpBadgeLeft7 rsvpBadgeTop1">...</div>
...

并且还用类而不是id定义css，例如：

.rsvpBadgeAll { position: absolute; z-index: 2; width: 50px; height: 50px; }

.rsvpBadgeLeft0 { left: -1px; }
.rsvpBadgeLeft1 { left: 74px; }
.rsvpBadgeLeft2 { left: 149px; }
.rsvpBadgeLeft3 { left: 224px; }
.rsvpBadgeLeft4 { left: 299px; }
.rsvpBadgeLeft5 { left: 374px; }
.rsvpBadgeLeft6 { left: 449px; }
.rsvpBadgeLeft7 { left: 524px; }

.rsvpBadgeTop0 { top: -2px; }
.rsvpBadgeTop1 { top: 68px; }
.rsvpBadgeTop2 { top: ...px; }
...
.rsvpBadgeTop25 { top: ...px; }

Answer 3

在CSS中你只能放

    #rsvpBadge{position: absolute; z-index: 2; width: 50px; height: 50px;}

    #rsvpBadge0{ top:<x>, left:<x>}
    #rsvpBadge1{ top:<x>, left:<x>}
    #rsvpBadge2{ top:<x>, left:<x>}

........等等 并根据屏幕大小编写一个javascript来计算顶部和左侧。