自适应按钮在IE6、IE7下的左右padding值

最新推荐文章于 2017-04-10 11:26:00 发布

jyy_12

最新推荐文章于 2017-04-10 11:26:00 发布

阅读量3w

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： ie input button url 浏览器 class

本文链接：https://blog.youkuaiyun.com/jyy_12/article/details/6636099

CSS 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一种解决在Internet Explorer 6和7中按钮元素显示异常的方法，特别是针对按钮内边距随文字数量增加而增大的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最终效果如下图：

用到的背景图：

HTML结构:

<span class="button"><input type="button" name="" value="确定" /></span>

CSS:

.button{
background:url(bg.gif) no-repeat right -30px;
height:30px;
display:inline-block;
margin-left:10px;
}
.button input{
cursor:pointer;
position:relative;
left:-10px;
margin-right:-10px;
padding:0 10px;
border:0 none;
background:url(bg.gif) no-repeat 0 0;
height:30px;
line-height:22px;
color:#FFFFFF;
font-size:12px;
text-align:center;
}

在IE6、IE7下，当input的padding值为0时，随着按钮里value文字的增多，左右内边距也逐渐增大；当input设padding：0 10px;时，IE6,IE7左右内边距表现得比其它浏览器大，远远大于10px。

解决方法：input的样式加上overflow:visible;即可解决此问题，原因不明。