我们一般在定义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. vim下很好的右键复制方法

    1)先按shift ,然后鼠标选中即可复制:(shift按下时为非vim环境) 2)好方法: "Enable and disable mouse use noremap <f1> ...

  2. Build website project by roslyn through devenv.com

    1.fetch the source code2.compile controls project3.copy files under bin folder of controls to bin fo ...

  3. Jenkins project

    1.project name 这个作为git clone的target folder 2.Multiple SCMs 建立2个git类型的操作,相互独立. additional Behaviors 设 ...

  4. 杂项-事务:OLTP(联机事务处理过程)

    ylbtech-杂项-事务:OLTP(联机事务处理过程) On-Line Transaction Processing联机事务处理过程(OLTP) 也称为面向交易的处理过程,其基本特征是前台接收的用户 ...

  5. 基于mkdocs-material搭建个人静态博客

    基于mkdocs-material搭建个人纯静态博客,没有php,没有mysql 如果你只是想安安静静的放一些技术文章,发布到个人站点或github-pages,mkdocs-material很适合你 ...

  6. Springboot使用AOP实现统一处理Web请求日志

    1.要使我们自定义的记录日志能够打印出来,我们需要先排除springboot默认的记录日志,添加如下的设置 2.新建 resources/log4j.properties 我的设置为: # LOG4J ...

  7. QlikSense系列(2)——QlikSense安装和升级

    继上篇对QlikSense进行总体介绍之后,想必大家想体验下产品,下面介绍安装的过程和注意点. 注:我的系统环境Windows Server 2008R2,QlikSense版本为3.1SR1 Qli ...

  8. 用户注册登录验证 多版本集合 + hashlib加密

    #!/usr/bin/env python# -*- coding: utf-8 -*-# @Time : 2018/5/6 0006 12:22# @Author : Anthony.Waa# @S ...

  9. showdialog

    在C#中窗口的显示有两种方式:模态显示(showdialog)和非模态显示(show). 区别: 模态与非模态窗体的主要区别是窗体显示的时候是否可以操作其他窗体.模态窗体不允许操作其他窗体,非模态窗体 ...

  10. Linker scripts之SECTIONS

    1 Purpose The linker script describes how the sections in the input files should be mapped into the ...