我们一般在定义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属性值是不全然一致的更多相关文章

  1. 重置浏览器的默认样式(css reset)

    (1)定义:首先css reset指的是重置浏览器的默认样式 (2)作用:因为现在的浏览器很多,并且每个浏览器都有自己的默认样式,这样就会导致一个页面在多个浏览器下展示产生差异,所以我们需要做一些处理 ...

  2. 如何更改 iOS 和安卓浏览器上的 input[type="radio"] 元素的默认样式?

    Safari 上的默认样式是这样的, 背景颜色可以使用background-color改变,但中间那个点始终无法去掉. 我查了一些jQuery插件,如iCheck.js,但是那说明写得我都看不明白,根 ...

  3. 重置浏览器默认样式 normalize.css

    1 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========= ...

  4. CSS系列——浏览器默认样式

    了解HTML标签在各浏览器当中的默认样式,可以让我们了解,为什么会要写Reset.css,Reset.css当中要怎么写样式最合理.试着思考下面的问题: 为什么会有默认样式? 每个浏览器的默认样式有什 ...

  5. 解决文件上传插件Uploadify在火狐浏览器下,Session丢失的问题

    因为在火狐浏览器下Flash发送的请求不会带有cookie,所以导致后台的session失效. 解决的方法就是手动传递SessionID到后台. $("#fileresultfiles&qu ...

  6. JS、jqueryie6浏览器下使用js无法提交表单的解决办法

    -----------------------JS.jqueryie6浏览器下使用js无法提交表单的解决办法---------------------------------------------- ...

  7. Chrome浏览器下自动填充的输入框背景

    记录下从张鑫旭老师的微博中看到关于input输入框的属性 1.autocomplete="off" autocomplete 属性规定输入字段是否应该启用自动完成功能 自动完成允许 ...

  8. 浏览器原生 form 表单POST 数据的两种方式

    我们在提交表单的时候,form表单参数中会有一个enctype的参数.enctype指定了HTTP请求的Content-Type. 常用有两种:application/x-www-form-urlen ...

  9. 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新

    在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...

随机推荐

  1. Cookies操作类

    实现代码: //声名一个数据集合 var listString = new List<string>() { "a", "b", "c&q ...

  2. 聚类(三)FUZZY C-MEANS 模糊c-均值聚类算法——本质和逻辑回归类似啊

    摘自:http://ramsey16.net/%E8%81%9A%E7%B1%BB%EF%BC%88%E4%B8%89%EF%BC%89fuzzy-c-means/ 经典k-均值聚类算法的每一步迭代中 ...

  3. hdoj--1533--Going Home(KM)

    Going Home Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tota ...

  4. 通过ip获取地址

    <?php /** * IP 地理位置查询类 * * @author 马秉尧 * @version 1.5 * @copyright 2005 CoolCode.CN */ class IpLo ...

  5. 原型模式(Prototype)C++实现

    意图:用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 实用性:1.当要实例化的类是在运行时刻指定时. 2.为了避免创建一个与产品类层次平行的工厂类层次时. 3.当一个类的实例只能有几 ...

  6. 小程序-wx:for

    wx:for (列表渲染) index默认数组下标item默认数组当前项的变量名 数组是对象的形式,单纯写{{item}},结果是[object object]的形式,必须加对象名,并且对象名基本设置 ...

  7. 优动漫PAINT是什么?有哪些功能和特色

    优动漫PAINT软件介绍: 优动漫PAINT是一款功能强大的漫画制作软件,该软件可以帮助漫画创作人员制作出完美,惟妙惟肖的漫画作品,它搭载了绘制漫画和插画所需的所有功能--丰富的笔工具.超强的笔压感应 ...

  8. MongoDB 学习笔记(一):安装及简单shell操作

    一.说明 1.该系列MongoDB学习笔记的学习环境采用的MongoDB版本为mongodb-win32-i386-2.4.6,操作系统为win7. 二.安装 1.新建两个目录,分别是D:\Insta ...

  9. BZOJ1150 [CTSC2007] 数据备份Backup 贪心_堆_神题

    Description 你在一家 IT 公司为大型写字楼或办公楼(offices)的计算机数据做备份.然而数据备份的工作是枯燥乏味 的,因此你想设计一个系统让不同的办公楼彼此之间互相备份,而你则坐在家 ...

  10. echarts示例

    将做过的echarts图表通过示例形式展示,便于以后使用,基于vue ,echarts,leancloud实现 github源码地址:https://github.com/707293891/echa ...