我创建了一个4位数的计数器,需要显示在页面的右下角。每个数字都有一个块图像作为“背景” 它适用于chrome,但不适用于IE7 +和FF ..
HTML (我只减了1位,但有4位):
<div id="container_bottom">
<div id="counters" <div id="counter_txt">Text:</div>
<div class="div_counter1">
<div class="div_counter2">
<img class="img-counter" src="counter_bg.png" />
</div>
<div class="div_counter3">
<span class="counter"><?php echo $counter[1]; ?></span>
</div>
</div>
</div>
CSS :
#container_bottom {
width: 100%;
min-width: 800px;
display: inline-block;
position: absolute;
margin-top: 150px;
_width: 800px;
}
#counters {
float: right;
margin-right: 5px;
}
.div_counter1 {
display: inline-block;
}
.div_counter2 {
display: inline-block;
}
.div_counter3 {
display: inline-block;
position: absolute;
margin-left: 8px;
top: 0px;
}
.counter {
font-size: 36px;
color: #ffffff;
}
#counter_txt {
font: 16px Segoe Print;
color: #0c3348;
display: inline-block;
position: absolute;
right: 180px;
top:10px;
}
答案 0 :(得分:2)
看起来你可能过于复杂,你想做的事情似乎是这样的
HTML
<div id="container_bottom">
<span class="counter_text">Text here:</span>
<span class="counter_holder">0</span>
<span class="counter_holder">0</span>
<span class="counter_holder">0</span>
<span class="counter_holder">6</span>
</div>
<强> CSS 强>
#container_bottom{
position:absolute;
bottom:20px;
right:20px;
}
#container_bottom .counter_holder{
display:inline-block;
background-color:green;
width:30px;
height:35px;
text-align:center;
font-size:30px;
border:1px solid black;
-moz-border-radius: 5px;
border-radius: 5px;
/* background-image: url(''); // add image here if needed*/
}
#container_bottom .counter_text{
/* add css here if needed */
}