在不同的浏览器下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属性值是不全然一致的更多相关文章
- 重置浏览器的默认样式(css reset)
(1)定义:首先css reset指的是重置浏览器的默认样式 (2)作用:因为现在的浏览器很多,并且每个浏览器都有自己的默认样式,这样就会导致一个页面在多个浏览器下展示产生差异,所以我们需要做一些处理 ...
- 如何更改 iOS 和安卓浏览器上的 input[type="radio"] 元素的默认样式?
Safari 上的默认样式是这样的, 背景颜色可以使用background-color改变,但中间那个点始终无法去掉. 我查了一些jQuery插件,如iCheck.js,但是那说明写得我都看不明白,根 ...
- 重置浏览器默认样式 normalize.css
1 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========= ...
- CSS系列——浏览器默认样式
了解HTML标签在各浏览器当中的默认样式,可以让我们了解,为什么会要写Reset.css,Reset.css当中要怎么写样式最合理.试着思考下面的问题: 为什么会有默认样式? 每个浏览器的默认样式有什 ...
- 解决文件上传插件Uploadify在火狐浏览器下,Session丢失的问题
因为在火狐浏览器下Flash发送的请求不会带有cookie,所以导致后台的session失效. 解决的方法就是手动传递SessionID到后台. $("#fileresultfiles&qu ...
- JS、jqueryie6浏览器下使用js无法提交表单的解决办法
-----------------------JS.jqueryie6浏览器下使用js无法提交表单的解决办法---------------------------------------------- ...
- Chrome浏览器下自动填充的输入框背景
记录下从张鑫旭老师的微博中看到关于input输入框的属性 1.autocomplete="off" autocomplete 属性规定输入字段是否应该启用自动完成功能 自动完成允许 ...
- 浏览器原生 form 表单POST 数据的两种方式
我们在提交表单的时候,form表单参数中会有一个enctype的参数.enctype指定了HTTP请求的Content-Type. 常用有两种:application/x-www-form-urlen ...
- 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新
在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...
随机推荐
- Connect the Cities--hdoj
Connect the Cities Time Limit : 2000/1000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) ...
- Truck History --hdoj
Truck History Time Limit : 4000/2000ms (Java/Other) Memory Limit : 131072/65536K (Java/Other) Tota ...
- java基本数据类型(二)和分支结构
基本数据类型(四类八种):不能为null一.整数型 byte----2的8次方 short----2的16次方 int----2的32次方 long----2的64次方二.浮点型 float----4 ...
- TopN问题(分别使用Hadoop和Spark实现)
简介 TopN算法是一个经典的算法,由于每个map都只是实现了本地的TopN算法,而假设map有M个,在归约的阶段只有M x N个,这个结果是可以接受的并不会造成性能瓶颈. 这个TopN算法在map阶 ...
- VS2005常用的快捷键分享
VS2005代码编辑器的展开和折叠代码确实很方便和实用.以下是展开代码和折叠代码所用到的快捷键,很常用: Ctrl + M + O: 折叠所有方法 Ctrl + M + M: 折叠或者展开当前方法 C ...
- IEnumerable ICollection IList
- 【Oracle】恢复丢失的临时表空间文件
Oracle 11g以后,临时表空间文件是可以在重启数据库以后自动生成的(当然也可以在相同目录再建一个临时表空间文件),模拟实验如下: 1)删除临时表空间数据文件 SYS@ENMOEDU> se ...
- aspnet_regiis加密文件提示路径中具有非法字符
加密结果受当前目录影响,不知道是不是哪里操作错误,mark. Web.config文件位置:E:\Web\Surgery 加密成功,上图命令最后有个".",表示web.conf ...
- matplotlib简介-高质量图形输出
Matplotlib 是一个用来绘制二维图形的 Python 模块,它克隆了许多 Matlab 中的函数, 用以帮助 Python 用户轻松获得高质量(达到出版水平)的二维图形. 文章来源:http: ...
- SPL类
用途:对类,方法,属性,参数的提取生成文档:自动加载插件 实列化类同于new:$ref = new ReflectionClass($classname);$class = $ref->newI ...