福州seo|福建seo >> 福州SEO优化 >> 焦点图右下部的button图标在ie6下高度不受控制

焦点图右下部的button图标在ie6下高度不受控制

作者:SEO技术 分类: 福州SEO优化 发布于:2015-7-30 10:27 ė618次浏览 60条评论
在做网站Banner焦点图的时候,效果已经非常完美的表现出来了,但有一点点小问题:在IE6下焦点图右下部的button图标高度不正常

源代码如下:
<div id="container">
                <div id="list" style="left:0px;">
                    <img src="img/banner.jpg" alt="5"/>
                    <img src="img/banner01.jpg" alt="1"/>
                    <img src="img/banner02.jpg" alt="2"/>
                    <img src="img/banner03.jpg" alt="3"/>
                    <img src="img/banner04.jpg" alt="4"/>
                    <img src="img/banner.jpg" alt="5"/>
                    <img src="img/banner01.jpg" alt="1"/>
                </div>
                <div id="buttons">
                    <span index="1" class="on"></span>
                    <span index="2"></span>
                    <span index="3"></span>
                    <span index="4"></span>
                    <span index="5"></span>
                </div>
                <a href="javascript:;" id="prev" class="arrow">&lt;</a>
                <a href="javascript:;" id="next" class="arrow">&gt;</a>
            </div>
CSS为:
#container {
    width: 754px; 
    height: 354px; 
    overflow: hidden; 
    position: relative; 
    margin-bottom:6px;
}
#list {
    width: 5278px; 
    height: 354px; 
    position: absolute; 
    z-index: 1;
}
#list img {
    float: left;
}
#buttons {
    position: absolute;
    width: 174px; 
    z-index: 2; 
    bottom: 12px; 
    right: 10px;
}
#buttons span {
    cursor: pointer; 
    float: left; 
    width: 25px; 
    height: 6px; 
    background: #DBDBEA; 
    margin-right: 8px;
    display:block;

}
#buttons .on {
    background: #CC0000;
}
.arrow {
    cursor: pointer; 
    display: none; 
    line-height: 39px; 
    text-align: center; 
    font-size: 36px; 
    font-weight: bold; 
    width: 40px; 
    height: 40px;  
    position: absolute; 
    z-index: 2; 
    top: 180px; 
    background-color: RGBA(0,0,0,.3); 
    color: #FFF;
}
.arrow:hover {
    background-color: RGBA(0,0,0,.7);
}
#container:hover .arrow {
    display: block;
}
#prev {
    left: 20px;
}
#next {
    right: 20px;
}
问题症结:已经把控制右侧图标的button span的高度设定为6px,可它不受控制,显示的是不止6px的高度。细查之下才发现span的block字体高度在ie6下默认是12像素,不管是设置的是6px还是5px,它都会显示12px像素的高度。这时需要#buttons span的css下补上font-size:0px;即可解决问题。

本文出自 福州seo|福建seo,转载时请注明出处及相应链接。

分享本文至:

俗话说:SEO大神都喜欢发表自己的观点!那么你呢?

电子邮件地址不会被公开。必填项已用*标注


Ɣ回顶部