CSS初始化的代码怎么写

html-css023

CSS初始化的代码怎么写,第1张

最耗资源的,最简单的

* { padding: 0margin: 0border: 0}

选择性初始化举例(综合)

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,legend,button

form,fieldset,input,textarea,p,blockquote,th,td {

padding: 0

margin: 0

}

3. 参考新浪、雅虎

/* 新浪全局样式 */

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{

  margin:0padding:0border:0

}

body{

  background:#fffcolor:#333font-size:12pxmargin-top:5pxfont-family:"SimSun","宋体","Arial Narrow"

}

ul,ol{

  list-style-type:none

}

select,input,img,select{

  vertical-align:middle

}

a{text-decoration:none}

a:link{color:#009}

a:visited{color:#800080}

a:hover,a:active,a:focus{color:#c00text-decoration:underline}

/* 雅虎全局样式 */

html {

  background: none repeat scroll 0 0 #FFFFFF

  color: #000000

}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {

  margin: 0

  padding: 0

}

table {

  border-collapse: collapse

  border-spacing: 0

}

fieldset, img {

  border: 0 none

}

address, caption, cite, code, dfn, em, strong, th, var {

  font-style: normal

  font-weight: normal

}

li {

  list-style: none outside none

}

caption, th {

  text-align: left

}

h1, h2, h3, h4, h5, h6 {

  font-size: 100%

  font-weight: normal

}

q:before, q:after {

  content: ""

}

abbr, acronym {

  border: 0 none

  font-variant: normal

}

sup {

  vertical-align: text-top

}

sub {

  vertical-align: text-bottom

}

input, textarea, select {

  font-family: inherit

  font-size: inherit

  font-weight: inherit

}

input, textarea, select {

}

legend {

  color: #000000

}

body {

  font: 13px/1.231 arial,helvetica,clean,sans-serif

}

select, input, button, textarea {

  font: 99% arial,helvetica,clean,sans-serif

}

table {

  font-size: inherit

}

pre, code, kbd, samp, tt {

  font-family: monospace

  line-height: 100%

}

a {

  text-decoration: none

}

a:hover, a:focus {

  text-decoration: underline

}

strong {

  font-weight: bold

}

input[type="submit"] {

  cursor: pointer

}

button {

  cursor: pointer

}

一、placeholder修改样式兼容性写法:

由于placeholder是h5新特性之一,目前还有兼容性问题,所以这样写以兼容各浏览器。

针对不同浏览器或不同版本的浏览器会有不同的写法,会添加相应的前缀。

注意:

1、WebKit, Blink, Edge浏览器等需要带上-webkit-前缀,且是双冒号,写的时候还要带上input

2、针对火狐浏览器则有两种写法,一种是针对低版本的,一种是针对高版本的,二者都需要带上-moz-前缀。要点1:火狐低版本的使用冒号(:),而高版本的使用双冒号(::);要点2:火狐浏览器不需要像webkit内核那样要带上input。

3、由于placeholder属性只在IE10+才支持,因此,针对IE10、IE11的写法是加上-ms-前缀,使用的是冒号(:),需要带上input

特别强调:冒号与双冒号的问题,还有是否需要加上input

作者:江峰★ 出处:http://www.cnblogs.com/jf-67/

打开CSDN,阅读体验更佳

css兼容性写法大全_前端独秀的博客

css兼容性写法大全 淘宝初始化代码 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li,pre, form, fieldset, legend, button, input, textarea, th, td {margin:0padding:0}...

继续访问

css 兼容性写法,CSS hack写法_weixin_34112208的博客

一、CSS hack写法 书写顺序为FireFox在最前,其次是IE8、IE7,最后是IE6。 color:red//所有浏览器 color:blue\9//所有IE +color:orange//IE7 _color:green//IE6 eg1. 若浏览器为FireFox,那么color:red若浏览器为IE8,...

继续访问

各浏览器css兼容写法

各浏览器css兼容写法各浏览器css兼容写法

如何解决placeholder的兼容性

placeholder在不支持html5的低版本的浏览器中,placeholder属性是无效的,例如ie9及以下的ie浏览器不兼容这个属性。下面介绍placeholder兼容性的处理 在页面添加如下脚本 $(function() { // 如果不支持placeholder,用jQuery来完成 if(!isSupportPlaceholder()) { // 遍历所有in

继续访问

CSS浏览器前缀兼容写法_梦凝哲雪的博客_css兼容前缀

CSS浏览器前缀兼容写法 Vendor prefix—浏览器引擎前缀,是一些放在CSS属性前的小字符串,用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。 该图来自简书沈龙 浏览器引擎前缀(Vendor Prefix)有哪些?

继续访问

CSS 各浏览器兼容写法(CSS HACK)_caspar笔记的博客

CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对IE浏览器。 类内部Hack:比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",而firefox两个都不...

继续访问

html+placeholder+兼容问题,placeholder属性做兼容性处理

placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或输入内容)时,提示文字消失。但是在不支持html5的低版本的浏览器中,placeholder属性是无效的,例如ie9及以下的ie浏览器不兼容这个属性。下面介绍placeholder兼容性的处理效果:http://hovertree.com/t...

继续访问

css兼容写法

css3 1.box-shadow: filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4)/*兼容ie*/ -moz-box-shadow: 2px 2px 10px #909090/*兼容firefox*/ -webkit-box-shadow: 2p...

继续访问

css 兼容解决方案,css兼容性处理方案

css兼容性处理方案首先是对于兼容性的理解。不同浏览器之间的兼容+同一浏览器,不同版本之间的兼容。解决方案主要有以下四种:1 浏览器CSS样式初始化对padding和margin,以及line-height等在全局初始化,统一不同浏览器之间的差异。举例:* {margin: 0padding: 0}html {line-height: 1.15-webkit-text-size-adjust...

继续访问

三分钟速记CSS兼容写法

CSS兼容浏览器的写法 主要是坑爹的IE浏览器,身为前端开发在写PC端项目的时候,需要在CSS样式上进行最基本最简单的样式适配的方法,这些也是必要掌握的。 文章目录CSS兼容浏览器的写法前言一、兼容不同浏览器1、针对不同内核基本的浏览器的兼容写法二、CSS Hack总结 前言 本篇文章主要总结了简单的及常用的CSS样式的兼容写法。 一、兼容不同浏览器 1、针对不同内核基本的浏览器的兼容写法 -webkit-:safari、chrome -moz- :firefox -ms- :ie -o-

继续访问

浏览器不能切html样式,css不同浏览器兼容性问题怎么解决?

浏览器的兼容性问题是Web前端开发人员经常会碰到的和必须要解决的问题。那么css不同浏览器兼容性问题怎么解决?下面本篇文章就来给大家介绍一下,希望对大家有所帮助。css不同浏览器兼容性问题的解决方案1. 浏览器CSS样式初始化由于每个浏览器的css默认样式不尽相同,所以最简单有效的方式就是对其进行初始化,相信很多朋友都写过这样的代码,在所有CSS开始前,先把marin和padding都设为0,以防...

继续访问

各浏览器兼容css写法

/* 针对Chrome谷歌浏览器内核支持的CSS样式 */ @media screen and (-webkit-min-device-pixel-ratio:0) { 样式 /* 例如 .font1 {color:red} / } 针对Firefox浏览器的内核CSS写法: @-moz-document url-prefix(){ 样式 / 例如 .font1 {color:red} / } ...

继续访问

css的兼容性写法

各浏览器兼容性css写法/* 针对Chrome谷歌浏览器内核支持的CSS样式 */@media screen and (-webkit-min-device-pixel-ratio:0) { 样式 /* 例如 .font1 {color:red} */}针对Firefox浏览器的内核CSS写法:@-moz-document url-prefix(){ 样式 /* 例如 .f

继续访问

最新发布 浏览器兼容css_CSS 样式浏览器前缀兼容性写法、生效写法

浏览器兼容css_CSS 样式浏览器前缀兼容性写法、生效写法

继续访问

CSS 中的字体兼容写法:用CSS为英文和中文字体分别设置不同的字体

font-family的调用方法: font-family:Arial,'Times New Roman','Microsoft YaHei',SimHeifont:bold 12px/0.75em Arial,'Times New Roman','Microsoft YaHei',SimHei根据font-family的原则,假如客户终端不认识前面的字体,就自动切换到第...

继续访问

ie浏览器样式兼容写法_常见的CSS样式兼容性写法

1. 设置透明度在IE6中使用 filter: alpha(opacity = 40)在其他浏览器中使用 opacity: 0.42. 设置行高/*\9表示兼容所有的IE浏览器*/line-height: 35px\93. 清除浮动.clearfix:after {content: ''height: 0clear: bothoverflow: hiddenvisibility: h...

继续访问

CSS兼容写法整理

css3(含ie9以下) 1.box-shadow: filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4)/*兼容ie*/ -moz-box-shadow: 2px 2px 10px #909090/*兼容firefox*/ -webkit-box-shado

继续访问

placeholder的简单使用

placeholder就是用户名密码框未输入内容时,默认显示的灰色文字。 如下图效果: <!DOCTYPE html><html><head><meta charset="utf-8"><title>placeholder效果演示(runoob.com)</title></head>&l...

继续访问

css兼容性写法大全

淘宝初始化代码 body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0padding:0} body,button,input,sel...

继续访问

热门推荐 css ie6,ie7,ie8 兼容性写法,CSS hack写法

margin-bottom:40px /*ff的属性*/ margin-bottom:140px\9 /* IE6/7/8的属性 */ color:red\0 /* IE8支持 */ *margin-bottom:450px/*IE6/7的属性*/ +margin-bottom:450px_color:#ff0000

继续访问

浏览器兼容的css写法

1. IE6、IE7、IE8兼容写法 _color: #ccc /* _只ie6支持 */ *color: #ccc/* *ie6/7支持 */*+color: #ccc/* *+ie7支持 */ color: #ccc\0 /* \0 IE8支持 */ color: #ccc\9/* \9 IE

继续访问

css 兼容 ie

首先,我在把 ie 浏览器更新到 11 后,在 f12 调试工具中发现一片空白,解决方法如下: 安装补丁: 64位的系统应该使用下面这个补丁:http://www.microsoft.com/en-us/download/details.aspx?id=45154 32位的系统应该使用下面这个补丁:http://www.microsoft.com/zh-CN/download/details.as...

继续访问

css中属性兼容性写法,CSS3兼容属性和标准属性的书写顺序

一、不同书写顺序示例首先个人推荐的正确写法://标准属性放在兼容属性之后-webkit-border-radius: 10px 30pxborder-radius:10px 30px容易产生问题的错误写法://标准属性放在兼容属性之前border-radius:10px 30px-webkit-border-radius: 10px 30px二、实例说明1.实例实例1.1(正确写法):Do...

继续访问

几种css属性兼容性写法

css属性兼容性写法,兼容低版本主流浏览器

继续访问

css兼容写法