『壹』 DIV+CSS为了更好的兼容各浏览器，哪些代码必须写呢
浏览器兼容,是个写div css老生常谈的问题了.
现在写css 不用 太多浏览器来来回回的校准,其实只要你代码写的规范,不冲突,计算准确,通常是不会出问题的.
写一个错误的css吧
padding-left:10px; float:left; 这样在ie6 浏览器下 就会出现双倍内边距 padding-left:10px 在ie6下面 因为float:left的影响,就会变成padding-left:20px 怎么解决呢? 加上display:inline属性就Ok啦.
这些都是经验之谈,其实每个新手刚刚开始学css div的时候都为浏览器兼容而头疼,几乎就是一个浏览器一个样子,还有我们写css的时候用dw的页面检查中的浏览器兼容问题,检查一下页面写的有没有问题.
其实写的多了,遇到的问题也多,经验自然也就多了,下次就知道怎么做了.
最后再说一下css hack吧.
css hack是 浏览器作弊的一个方法,针对每种浏览器对css解读方式的不同,针对每一种浏览器来写css.
就叫做css hack. 怎么用呢?
现在在写css hack的时候 很少用!important了,不知道你是否知道这个属性?
简单的解释一下吧, 在写样式表的时候经常会有优先级问题,比如:
.content li{ width:100px;}
.list{ width:105px;}
<ul class="content"><li class="list"></li></ul>
这样写 .content li{width:100px}就会被 .list 替换掉.
打个比方说吧:在写css的时候 一个标记的样式 算是 1分吧.
比如:
body{margin:0;padding:0}
一个class算3分
如果给Body应用class 那么 body{margin:0;padding:0}就无效啦,所以class比标签权重要高.
那么#id呢? 算5分好啦, 也就是说 标记 class id中 id的权重是最高的,那么我们书归正传!important的权重算10分吧,怎么用呢?
a{ width:100px !important; }
a{width:122px;}
我们知道 浏览器 在读取样式的时候是从左至右,从上到下的. 那么第二个a样式width:122px 就不会被浏览器读出来.因为刚才已经说了 一个标签 1分 一个!important 10分.
现在写css hack大多都只针对ie6 7 ff来写 至于Ie8
<meta http-equiv="x-ua-compatible" content="ie=7" /> 在head里面加入这个, ie8浏览器 就和ie7一模一样了.
写Hack的时候唯一需要注意的就顺序.
如
{width:100px; *width:90px; -width:80px;}
为什么要这么写呢? width:100px 是正常的,就不多说了, *width:90px 刚才我们说 只针对ff ie6 7写hack
*width这个" * " ff是不是别的,同样" - "也是不识别的.
" * " ie6 7都识别,但是Ie7不识别" - " 所以要把Ie6写到最后,为什么?因为要覆盖掉之前的*width
下面 来看一下 ff ie6 7解读css是怎样的.
首先是ff
width:100px; 识别 *width:90px;不识别,跳过 -width:80px;同样
那么最后的width标记属性宽度就是100px
下面看Ie7
width:100px;识别,宽度为100px *width:90px; 识别,覆盖之前的width标记宽度为90px -width:80px;不识别跳过.
最后width标记属性为90px.
最后我们来看Ie6
width:100px; 识别,宽度为100px *width:90px;识别,宽度为90px -width:80px;识别,宽度为80px;那么最后的宽度就是80因为 刚才说过 浏览器是从左至右解读代码, 当读取到3个width的时候 就会采用覆盖的方式, 之后的覆盖掉之前的. 所以ie6最后的宽度就是80px.
好啦,css hack讲解到此结束, 全部都是手打的,希望对你有帮助.
『贰』 edge浏览器兼容代码的前缀是什么
一、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:0;padding: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: 0;padding: 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',SimHei; font:bold 12px/0.75em Arial,'Times New Roman','Microsoft YaHei',SimHei; 根据font-family的原则，假如客户终端不认识前面的字体，就自动切换到第...
继续访问
ie浏览器样式兼容写法_常见的CSS样式兼容性写法
1. 设置透明度在IE6中使用 filter: alpha(opacity = 40);在其他浏览器中使用 opacity: 0.4;2. 设置行高/*\9表示兼容所有的IE浏览器*/line-height: 35px\9;3. 清除浮动.clearfix:after {content: '';height: 0;clear: both;overflow: hidden;visibility: 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:0;padding: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 30px;border-radius:10px 30px;容易产生问题的错误写法：//标准属性放在兼容属性之前border-radius:10px 30px;-webkit-border-radius: 10px 30px;二、实例说明1.实例实例1.1(正确写法)：Do...
继续访问
几种css属性兼容性写法
css属性兼容性写法，兼容低版本主流浏览器
继续访问
css兼容写法
『叁』 请问有没有一段css代码可以兼容全部的浏览器，ie6,ie7 ie8也可以的
background:red;/*FF里显示的红色*/
+background:blue !important;/*IE7下面显示的蓝色*/
+background:green;/*IE6下面显示的绿色*/
注意书写顺序，原理：FF不识别加过符号的属性，而IE识别。 而!important是针对IE7的。
『肆』 CSS兼容所有浏览器代码怎么写
* ，ie6,ie7可以识别；
_和-， ie6可以识别；
!important ,表示高优先级，ie7及以上，firefox都支持，ie6认识带!important的样式属性内，但不认识!important的优容先级；
-webkit- ，针对safari，chrome浏览器的内核CSS写法
-moz-，针对firefox浏览器的内核CSS写法
-ms-，针对ie内核的CSS写法
-o-，针对Opera内核的CSS写法