在不同的浏览器下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 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...
随机推荐
- fragment.setMenuVisibility setUserVisibleHint
[Android]Fragment真正意义上的onResume和onPause 前言 Fragment虽然有onResume和onPause的,但是这两个方法是Activity的方法,调用时机也是与A ...
- linux logo的格式【转】
本文转载自:http://blog.csdn.net/xiayu98020214/article/details/7394100 =================================== ...
- python spark 决策树 入门demo
Refer to the DecisionTree Python docs and DecisionTreeModel Python docs for more details on the API. ...
- nyoj--523--亡命逃窜(BFS水题)
亡命逃窜 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 从前有个叫hck的骑士,为了救我们美丽的公主,潜入魔王的老巢,够英雄吧.不过英雄不是这么好当的.这个可怜的娃被魔 ...
- Constructing Roads --hdoj
Constructing Roads Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) ...
- JavaScript:Browser 对象
ylbtech-JavaScript:Browser 对象 1. Window 对象返回顶部 1. Window 对象 Window 对象 Window 对象表示浏览器中打开的窗口. 如果文档包含框 ...
- day63-webservice 04.JaxWsServerFactoryBean和SOAP1.2
<wsdl:definitions xmlns:ns1="http://schemas.xmlsoap.org/soap/http" xmlns:soap12="h ...
- 不用任何插件,实现一个tab栏切换
//使用jquery中获取当前索引的方法.显示隐藏 <script> $(".tab_list li").on('click', function () { $(thi ...
- codeforces 712 Memory and De-Evolution
2019-05-19 13:25:37 加油,加油,坚持,坚持!!! 一定要逆推,才可以是最少的次数 更好的方法: https://www.cnblogs.com/ECJTUACM-873284962 ...
- maven nexus memory optimization
#链接地址:https://help.sonatype.com/repomanager3/system-requirements#filehandles While starting Nexus I ...