=波波日志 > HTML/WML/CSS兼容/XML > firefox下button内嵌span会出现移位bug=
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浏览器下不会出现这种问题。
测试代码如下
用javascript修正样式，增加margin控制
在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>
.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>
.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>
类别：HTML/WML/CSS兼容/XML 作者：波波 日期：2011-07-20 【评论：0】
相关文章
- ·firefox下使用快捷键Ctrl+Enter发送信息时出现系统的下载窗口
- ·fckeditor编辑器在Firefox下出现this.LinkedField is undefined错误
- ·button,input type=button按钮在IE和w3c，firefox浏览器区别
- ·IE6下的119个bug
- ·IE8下的60个bug
- ·Opera10下的31个bug
- ·CookieContainer不同子域名下的bug
- ·ajaxPro7.7.31.1 出现this.onTimeout is not a function 的Bug解决方案
- ·firefox下光标处插入文本
- ·Firefox下的AJAX onreadystatechange问题
- ·FireFox下端口不一致导致跨域
- ·firefox下图片拖动的问题
暂时没有评论！
发表留言
