input 按钮在IE下呈现不1致的适配难题

日期:2021-01-20 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

这段時间在解决网页页面默认设置的input 按钮时,IE下常呈现不1致的宽度难题,令人觉得很纠结。因此今日求教了几位大神把这个难题处理了,如今贴出来和大伙儿共享资源1下,自然这个方式在网络上曾有人写过,大伙儿能够1起来互相讨论1下。

Html Code:

拷贝编码
编码以下:

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

我先在这里贴出1段原始的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;
}

我看先看来看实际效果图吧:

从上图中大家显著能够看出,仅有在Firefox下显示信息才是一切正常,在IE7和IE下沒有圆角实际效果,这个全是大家都知道,但IE7具备1个致命的难题,便是宽度变长了,大伙儿1定会觉得怪异,大家沒有定宽度的呀,如何会这样呢?呆会大家会引入他人的说法了表明这个难题;此外便是Safari和Chrome下高宽比如何也不好的呀。

便是由于这样的难题,我纠结了1个中午,但在高人的指导下,還是寻找了有关的处理方法,如今大家1起看来看高人是怎样处理这样的适配难题。在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
}

这样大家就把那个头痛的难题处理了,大伙儿能够1起看看改动后的实际效果:

这里提示大伙儿,针对字垂直居中的难题,不但受行高危害,并且还受其字体样式,字号的危害,大伙儿感兴趣爱好的能够尝试1下。

上一篇:CSS权重关联及难题分析 返回下一篇:没有了