|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识。
破洛洛文章简介:CSS网页计划技能:input按钮在IE扫瞄器的兼容成绩。
这段工夫在处置网页默许的input按钮时,IE下常展现纷歧致的宽度成绩,让人感应很纠结。以是明天就教了几位妙手把这个成绩办理了,如今贴出来和人人共享一下,固然这个办法在网上曾有人写过,人人能够一同来互相切磋一下。
HtmlCode:
<inputtype="submit“;class="form-submit"value="subscribe"name="op"id="edit-submit"/>
我先在这里贴出一段初始的CSS款式
CSSCode:
input.form-submit{
border-radius:3px;//FF下的完成圆角
-webkit-border-radius:3px;//Safari,Chrome下完成圆角
border:1pxsolid#469021;
background:#64A246;
color:#fff;
font:bold11pxarial,sans-serif;
padding:0.25em0.5em;
text-transform:uppercase;
}
我看先来看看最终效果吧:
从上图中我们分明能够看出,只要在Firefox下显现才是一般,在IE7和IE下没有圆角效果,这个都是尽人皆知,但IE7具有一个致命的成绩,就是宽度变长了,人人必定会感应奇异,我们没有定宽度的呀,怎样会如许呢?呆会我们会援用他人的说法了申明这个成绩;别的就是Safari和Chrome下高度怎样也不可的呀。
就是由于如许的成绩,我纠结了一个下战书,但在高人的指导下,仍是找到了相干的办理举措,如今我们一同来看看高人是怎样办理如许的兼容成绩。在IE7下会跟着笔墨的增添招致文本间隔按钮摆布两侧的间距愈来愈年夜,如许就招致了上图中所看到的效果,但该成绩存在于IE6/IE7,FF、IE8和Opera10没发明相似成绩。关于另外一情形,小生至今还没有弄分明为何在Safari和Chrome下会呈现高度成绩,还但愿列位先辈和妙手指导。
针对后面的Bug,我对我的CSS略加做了修正,以下:
input.form-submit{
-webkit-border-radius:3px;
border-radius:3px;
border:1pxsolid#469021;
background:#64A246;
color:#fff;
font:bold11pxarial,sans-serif;
padding:0.25em0.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
}
如许我们就把谁人头痛的成绩办理了,人人能够一同看看修正后的效果:
这里提示人人,关于字居中的成绩,不但受行高影响,并且还受其字体,字号的影响,人人感乐趣的能够实验一下。
</p>
所有的设计第一步就是构思,构思好了。 |
|