24小时在线 - 古典小说 - 文学小说 - 关于我们
您的当前位置:首页 > web开发 > Html/Css >

在不同的浏览器下FORM及它的小朋友们默认样式的CSS属性值是不完全一致

来源:比特技术 编辑:比特技术网 时间:2018-05-19点击:
导读:在不同的浏览器下FORM及它的小伙伴们默认样式的CSS属性值是不完全一致我们一般在定义CSS样式的时
在不同的浏览器下FORM及它的小伙伴们默认样式的CSS属性值是不完全一致



我们一般在定义CSS样式的时候都需要定义去掉HTML标签默认样式的CSS,原因是在不同的浏览器下面它们的表现出来的默认样式不完全一致,我们要保证在不同的浏览器下它们能正常显示出我们想要达到的预期效果,所以我们需要重新给这些不一致的标签定义样式,让它们在不同的浏览器下CSS样式统一起来,然后我们再去根据效果图去定义它。


接下来我们就拿这个FROM及它的小伙伴们(input、fieldset、button等等)来做一个简单的实验。主要针对微软IE8、火狐FF、谷歌Chrome做一些比较。可能在其它的浏览器下面得到的默认值可能和下面的表格中的值不一格。通过这个表格想说明的是这些HTML标签在不同的浏览器下面大部分是不一致的,在下面会给出CSS解决方案。


form在标准模式下
元素 IE8 FF Chrome
form 在怪异模式下 from的默认会有margin-bottom:16px;
INPUT[type=text] padding:1px;
border-width:2px;
padding:2px;
border-width:1px;
padding:1px;
border-width:2px;
INPUT[type=checkbox] padding:3px; margin:3px;
margin-left:4px;
margin:3px 3px 3px 4px;
INPUT[type=radio] padding:3px; margin:3px 3px 0 5px; margin:3px 3px 0 5px;
INPUT[type=submit] padding:1px 8px;
border-width:3px;
padding:0 6px;
border-width:3px;
padding:1px 6px;
border-width:2px;
button padding:1px 8px;
border-width:3px;
padding:0 6px;
border-width:3px;
padding:1px 6px;
border-width:2px;
fieldset padding:0 2px;
border-width:2px;
margin:0 2px;
padding:5px 10px 12px;
border-width:2px;
padding:0 2px;
padding:5px 12px 2px;
border-width:2px;
margin:0 2px;


统一HTML标签默认CSS样式的解决方案:

  body,form,input, button,fieldset {
    margin:0;
    padding:0;
  }


上面代码没有对border-width进行重新定义样式,原因我们很少用默认的边框颜色,一般定义时就直接定义它的边框大小了,如:border:1px solid red;


去HTML标签默认样式有的网站专门定义一个reset.css文件,有的则是把它们和其它的文件合同在一个文件里如:base.css。

上面的这代码CSS代码只是reset去默认样式的很小一部分。希望通过这篇文章可以让刚入行的前端的小伙伴们对这个reset有一些了解,知道为什么要这么做,只有知道了为什么这么做才能做的更好,写起代码得心应手。


Input[type=text]l输入文本后,chrome、FF垂直居中,但在ie下不垂直居中



来源:比特技术在线(www.byte.online),欢迎分享本文,转载请保留出处!
http://www.byte.online/a/webkaifa/Html_Css/2018/328586.html
责任编辑:比特技术网

    打赏

    取消

    感谢您的支持,我会继续努力的!

    扫码支持
    扫码打赏,你说多少就多少

    打开支付宝扫一扫,即可进行扫码打赏哦

    网友评论:

    Copyright © www.byte.online 比特技术在线 版权所有 粤ICP备15038486号-3
    本站所有资料来源于网络,由个人收集整理,仅限于个人学习和研究,如果侵犯您的权益请联系我们删除!
    Top