WEB开发网
开发学院网页设计DivCss input按钮在IE浏览器的兼容 阅读

input按钮在IE浏览器的兼容

 2012-03-31 09:21:58 来源:WEB开发网   
核心提示: IE下常显现不一致的宽度问题,让人感到很纠结,input按钮在IE浏览器的兼容,所以今天请教了几位高手把这个问题解决了,现在贴出来和大家共享一下,我对我的CSS稍加做了修改,如下:input.form-submit {-webkit-border-radius: 3px;border-radius: 3px;bord

 IE下常显现不一致的宽度问题,让人感到很纠结。所以今天请教了几位高手把这个问题解决了,现在贴出来和大家共享一下,当然这个方法在网上曾有人写过,大家可以一起来相互探讨一下。

Html Code:
<input type="submit“; class="form-submit" value="subscribe" name="op" id="edit-submit" />

 我先在这里贴出一段初始的CSS样式

CSS Code:

input.form-submit {
  border-radius: 3px;//FF下的实现圆角
  -webkit-border-radius: 3px;//Safari,Chrome下实现圆角
  border: 1px solid #469021;
  background: #64A246;
  color: #fff;
  font:bold 11px arial,sans-serif;
  padding: 0.25em 0.5em;
  text-transform: uppercase;
}

在IE7下会随着文字的增加导致文本距离按钮左右两侧的间距越来越大,这样就导致了上图中所看到的效果,但该问题存在于IE6/IE7,FF、IE8以及Opera 10没发现类似问题。对于另一情况,小生至今还没有弄明白为什么在Safari和Chrome下会出现高度问题,还希望各位前辈和高手指点。

针对前面的Bug,我对我的CSS稍加做了修改,如下:

input.form-submit {
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #469021;
background: #64A246;
color: #fff;
font:bold 11px arial,sans-serif;
padding: 0.25em 0.5em;
text-transform: uppercase;
height: 27px;
line-height: 19px;
margin: 0;
overflow: visible;
width: auto;
*width: 1;
}

也就是我在以前的基础上增加了以下几行代码

input.form-submit {
  height: 27px;//设置行高是为了解决Safari和Chrome下的高度问题
  line-height: 19px;//让文字居中显示
  margin: 0;
  overflow: visible;//只有设置这个属性IE下padding才能生效
  width: auto;//现代浏览器下识别
  *width: 1;//IE7和IE6识别,设置值为1,我也不知道有何作用,但有些人此处设置值为0
}

Tags:input 按钮 IE

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接