在不同的浏览器下FORM及它的小伙伴们默认样式的CSS属性值是不完全一致
来源:互联网 发布:ubuntu zip压缩命令 编辑:程序博客网 时间:2024/06/08 04:50
我们一般在定义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;
上面的这代码CSS代码只是reset去默认样式的很小一部分。希望通过这篇文章可以让刚入行的前端的小伙伴们对这个reset有一些了解,知道为什么要这么做,只有知道了为什么这么做才能做的更好,写起代码得心应手。
Input[type=text]l输入文本后,chrome、FF垂直居中,但在ie下不垂直居中
0 0
- 在不同的浏览器下FORM及它的小伙伴们默认样式的CSS属性值是不完全一致
- CSS样式的五种来源及浏览器默认样式
- DivCSS小结:浏览器默认HTML的CSS样式属性
- 【转帖】DivCSS小结:浏览器默认HTML的CSS样式属性
- 【CSS】CSS消除浏览器的默认样式
- CSS中visibility属性的collapse属性值有什么用?在不同浏览器下有什么区别?
- 在不同的浏览器使用不同的css样式,解决浏览器兼容问题
- 在不同的浏览器使用不同的css样式,解决浏览器兼容问题
- 针对不同浏览器的css样式
- CSS样式兼容不同浏览器的问题
- 关于Form的js语句及Form在不同浏览器的表现
- 开源搜索引擎和它的小伙伴们--初探
- QtAndroid详解(2):startActivity和它的小伙伴们
- QtAndroid详解(2):startActivity和它的小伙伴们
- Webkit内核的浏览器默认CSS属性
- 浏览器的默认样式
- css属性对不同浏览器的兼容
- 如何解决css样式表在不同浏览器中显示效果不同的问题
- android中广播的使用(动态和静态注册)
- iOS代码强制退出程序
- JDBC编程之程序优化
- hdu 5643King's Game(约瑟夫游戏,递归)
- activiti事务和自己业务事务共同的使用
- 在不同的浏览器下FORM及它的小伙伴们默认样式的CSS属性值是不完全一致
- Java解析xml的主要解析器: SAX和DOM的选择
- linux系统设置程序开机启动(以mysql为例)
- bootstrap Model 点击确定按钮后 转到新页面
- 知乎 哪些素质很重要,却是读书学不来的?-3
- Android的源代码下载教程-android学习之旅(102)
- eclipse打jar包
- SVD(一)
- CXF Interceptor拦截器