firefox下button内嵌span会出现移位bug

　　在Firefox下，如果button内部嵌入span，button和span的display都为block，width，height都一致时，span无法完全遮盖住button控件，button和span会出现一些边距，在Firefox3.6下面，左边相差3px，顶部相差 2px，不知道是不是Firefox的bug。

　　在IE浏览器和chrome浏览器下不会出现这种问题。

测试代码如下

-HTML

<style type="text/css">
.jsbutton {
            display:block;
            width:200px;
            height:40px;
            border:0px;
            background:#aaa;
            padding:0px;
        }    
        .jsbutton span.hover {
            display: block; 
            width:200px;
            height:40px;
            background:#eee;
        }
</style> 
<button class="jsbutton"><span class="hover">123</span></button>

用javascript修正样式，增加margin控制

-HTML

<style type="text/css">
.jsbutton {
            display:block;
            width:200px;
            height:40px;
            border:0px;
            background:#aaa;
            padding:0px;
        }    
        .jsbutton span.hover {
            display: block; 
            width:200px;
            height:40px;
            background:#eee;
        }
</style> 
<script type="text/javascript">
    //fix firefox，注意样式不能直接在上面的style中直接写，要用javascript判断下是否为Firefox再增加margin-left和margin-right，要不在ie或者chrome下就显示不正确
    if (/firefox/i.test(navigator.userAgent)) {
        document.write('<style type="text/css">.jsbutton span.hover {margin-left:-3px;margin-top:-2px;}</style>');
    }
</script> 
<button class="jsbutton"><span class="hover">123</span></button>

加支付宝好友偷能量挖...

原创文章，转载请注明出处：firefox下button内嵌span会出现移位bug

2011-7-20评论(0)Web开发网

阅读(221)喜欢(0)分类：HTML/CSS兼容/XML