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

时间：2024-01-06 10:03:26

在不同的浏览器下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;
margin: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下不垂直居中

相关文章