在不同的浏览器下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下不垂直居中
在不同的浏览器下FORM及它的小伙伴们默认样式的CSS属性值是不完全一致相关推荐
- getAttribute方法在IE6/7下获取href/src属性值的问题
IE中的getAttribute方法与其他标准浏览器有很多不同,这里记录的是获取href/src属性值时的问题. 如将href=""或href="#",预期返回 ...
- 火狐浏览器滚动条样式修改 css
纯css设置Firefox火狐浏览器的滚动条样式 设置Firefox滚动条样式的css属性只有 scrollbar-color 和 scrollbar-width 这两个.看名字就知道第一个是设置滚动 ...
- 解决SWFUpload在Chrome、Firefox浏览器下session找不到的问题
SWFUpload是一个非常不错的异步上传组件,但是在Chrome.Firefox等浏览器下使用的时候会有问题.问题如下:为了防止跳过上传页面直 接向"接受SWFUpload上传的一般处理程 ...
- 哪个html在大部分浏览器下是不隐藏的,前端浏览器兼容性问题总结
市场上浏览器种类很多,不同浏览器的内核也不尽相同,所以各个浏览器对网页的解析存在一定的差异.浏览器内核主要分为两种,一是渲染引擎,另一个是js引擎,内核更加倾向于说渲染引擎. 常见的浏览器内核可以分四 ...
- chrome浏览器的跨域设置 Google Chrome浏览器下开启禁用缓存和js跨域限制--disable-web-security...
chrome用户默认路径 Win7:C:\Users\[用户名]\AppData\Local\Google\Chrome\User Data\ XP:C:\Documents and Settings ...
- 浏览器下的CSS透明度
浏览器下的CSS透明度 元素透明度时常是个恼人的问题,下面这种方式可以实现所有浏览器下的透明度设置: .transparent {zoom: 1;filter: alpha(opacity=50);o ...
- placeholder在不同浏览器下的表现及兼容方法
2019独角兽企业重金招聘Python工程师标准>>> 1.什么是placeholder? placeholder是html5新增的一个属性,当input或者textarea设置了该 ...
- 火狐浏览器下点击a标签时出现虚线的解决方案
火狐浏览器下点击a标签时出现虚线的解决方案 参考文章: (1)火狐浏览器下点击a标签时出现虚线的解决方案 (2)https://www.cnblogs.com/lhyhappy365/p/595646 ...
- IE浏览器下ajax缓存导致数据不更新的解决方法
IE浏览器下ajax缓存导致数据不更新的解决方法 参考文章: (1)IE浏览器下ajax缓存导致数据不更新的解决方法 (2)https://www.cnblogs.com/xcsn/p/4745437 ...
最新文章
- 谷歌正在测试一个人工智能系统，帮助视障人士参加跑步比赛
- JAVA实现二维数组中的查找（《剑指offer》）
- Python Setuptools 升级（Upgrade）
- 【web安全】Spring Boot eureka xstream 反序列化
- LintCode刷起来（一）
- HTML 显示特殊字符时转义操作
- 数通手稿留档——Frame Relay
- 杀不死的人狼——我读《人月神话》（四）
- java单例模式的7种实现方式
- C# 修改list所有对象中的某字段
- CAD用Ctrl+V复制粘贴东西的时候特别慢
- 获取非行间样式和行间样式方法
- Java 方法重写与重载的区别 示例 重载多数相加求和 重写toString()和equals()
- Facebook养号的账号区别？
- 现在40系显卡都快出来了，为何1060型号的显卡还有这么多人用？
- 少年宫计算机兴趣小组活动教案,少年宫象棋兴趣小组活动教案全册段跃华.docx...
- ecc 算法 PHP实现,ECC算法的详细说明
- Android项目打包成aar文件并在其他项目引用，作为依赖包
- 服务器无盘网卡设置,安装无盘时各种网卡最佳设置
- k8s通过命令批量删除pod