在不同的浏览器下FORM及它的小伙伴们默认样式的CSS属性值是不完全一致
2016-03-16 16:29
501 查看
我们一般在定义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; |
body,form,input, button,fieldset { margin:0; padding:0; }
上面代码没有对border-width进行重新定义样式,原因我们很少用默认的边框颜色,一般定义时就直接定义它的边框大小了,如:border:1px solid red;
去HTML标签默认样式有的网站专门定义一个reset.css文件,有的则是把它们和其它的文件合同在一个文件里如:base.css。
上面的这代码CSS代码只是reset去默认样式的很小一部分。希望通过这篇文章可以让刚入行的前端的小伙伴们对这个reset有一些了解,知道为什么要这么做,只有知道了为什么这么做才能做的更好,写起代码得心应手。
相关文章推荐
- 6、CSS基础 part-4
- 关于CSS浮动float属性的了解及清除浮动的方式
- CSS3新特性学习
- Retina视网膜屏中CSS3边框图片像素虚边的问题
- css3d总结
- 神奇!js+CSS+DIV实现文字颜色渐变效果
- AlertDialog常用的一些样式
- js兼容性之css的float
- css布局的相关几个难点
- 5、CSS基础part-3
- 轻松搞定各版本IE兼容问题,IE6,IE7,IE8,IE9,IE10,IE11
- (一)css代码积累——自己经常忘记,但是总记不住的代码
- CSS图片链接、映射
- CSS入门介绍
- CSS的居中问题
- css切背景图片(background-position)
- CSS定位中的必须深究的常用技法
- css 居中
- CSS字体加粗总结
- CSS3的文字阴影—text-shadow