css 浏览器兼容性问题集合

【转】CSS浏览器兼容性与解析问题终极归纳

1.怪异模式问题:漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中会触发怪异模式.为避免怪异模式给我们带来不必要的麻烦,最好养成书写DTD声明的好习惯. 2.IE6双边距问题:在IE6下,如果对元素设置了浮动,同时又设置了margin-left或margin-right,margin值会加倍.例如: HTML: <div class="myDiv"></div> CSS: .myDiv{ width:100px; height:100px;…

浏览器的兼容性（CSS浏览器兼容性、CSS hack）

一.关于CSS hack(尽量不用或者少用,减少页面复杂度) 1.条件注释法:(我的测试是IE9及其以下才有效) 这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式.举例如下只在IE下生效 只在IE6下生效 只在IE6及其以上浏览器中生效<!--[if gte IE 6]…

HTML+CSS浏览器兼容性问题

浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:CSS里 *{margin:0;padding:0;border:0;} 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0. 浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大…

常见CSS浏览器兼容性问题与解决方案【转载自http://blog.csdn.net/chuyuqing/article/details/37561313/】

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题. 在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都死浏览器…

CSS浏览器兼容性问题解决方法总结

CSS浏览器兼容解决总结如下: 1. CSS中几种浏览器对不同关键字的支持,可进行浏览器兼容性重复定义 !important 可被FireFox和IE7识别 * 可被IE6.IE7识别 _ 可被IE6识别 *+ 可被IE7识别区别IE6与FF: background:orange;*background:blue;区别IE6与IE7: background:green !important;background:blue;区别IE7与FF: background:orange; *backgr…

javascript和css浏览器兼容性总结

一些浏览器的兼容性做一个总结的问题以下: 为什么会出现这样的现象是?主要表现为Firefox这样的良好支持的浏览器W3C标准,这是现在CSS支持最好的浏览器,和ie它比较早出现,在w3c支持一直没有做得很好. 有非常多的事情出现FF和IE于它们的默认显示不一样,而这个默认样式该怎样显示我知道在w3中有没有相应的标准来进行规定. 以下总结一下这两种浏览器的兼容问题: 1.HTML对象获取问题 FireFox:document.getElementById("idName"); ie:do…

CSS浏览器兼容性与解析问题终极归纳

1.怪异模式问题:漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中会触发怪异模式.为避免怪异模式给我们带来不必要的麻烦,最好养成书写DTD声明的好习惯. 2.IE6双边距问题:在IE6下,如果对元素设置了浮动,同时又设置了margin-left或margin-right,margin值会加倍.例如:HTML:<div class="myDiv"></div>CSS:.myDiv{ width:100px; height:100p…

CSS浏览器兼容性写法小结

* , ie6,ie7可以识别: _和- , ie6可以识别: !important ,表示高优先级,ie7及以上,firefox都支持,ie6认识带!important的样式属性,但不认识!important的优先级: -webkit- ,针对safari,chrome浏览器的内核CSS写法 -moz-,针对firefox浏览器的内核CSS写法 -ms-,针对ie内核的CSS写法 -o-,针对Opera内核的CSS写法示例代码 <style> .div1{ *positi…

CSS浏览器兼容性----Hack

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

CSS浏览器兼容性问题集（）两

11.非常适合高度适合于被改变时所述内目标高度的外层的高度不能自己主动调节,尤其是排队对象时margin 要么paddign 时. 例: #box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } <div id="box"> <p>p对象中的内容</p> </div…

css 浏览器兼容性问题解决

一个.!important (功能有限) 随着IE7正确!important支持, !important 方法现在只IE6兼容.(注意措辞.我记得这句话需要推进的位置.) : #example { width: 100px !important; /* IE7+FF */ width: 200px; /* IE6 */ } 二.CSS HACK的方法(新手能够看看,高手就当路过吧) 首先须要知道的是: 全部浏览器通用 height: 100px; IE6 专用 _hei…

CSS浏览器兼容性

答题技巧:因为这个问题主要是看你经验,一般有了开发经验的都会遇到这样的坑,你只要说出几个来大致就可以了. 1.对齐文本和文本输入框问题: 当input元素在设置了高时,在IE7.IE8.IE9下会出现文本和文本输入框不能对齐的现象,其他正常,包括opera 解决: vertical-align:middle; 2.容器宽度在浏览器中解释不同问题: 不同浏览器下宽度不同,比如说设置width:200px,在iE7.IE8.IE9下显示的是200px,在FF.Chrome.Opera中显示的是2…

CSS浏览器兼容性与解决

一.超链接访问后hover样式不出现 1.现象描述: 同时设置了a:visited和a:hover样式,但一旦超链接点击过后,hover的样式就不再出现了. 2.解决方法: 调整样式顺序为先a:visited再a:hover即可. a标签四种状态的排序:l(link)ov(visiter)e h(hover)a(active)te 二.行内元素上下margin和padding不拉开元素间距 1.现象描述: 行内元素的margin和padding在水平方向的都产生边距效果,但竖直方向的都没有效果.…

CSS 多浏览器兼容性问题及解决方案

兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 3.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式 4.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字…

浏览器兼容性之Css篇

本文与上一篇随笔<浏览器兼容性之Javascript篇>有一定关联,下来我会继续不断总结,旨在解决浏览器兼容性,对遇到类似问题的同仁有所帮助,如有更多解决浏览器兼容性的案例还望大家分享一起讨论. 最近公司的BS产品对浏览器兼容性呼声愈来愈多,具体用户事情情况其实不是我关心的问题,总之工作都是都围绕着IE6-IE10(IE11暂时没涉及),Chrome,FireFox三大主流浏览器进行,(顺便吐槽一下Firefox已经算不上主流了),另外360和搜狗浏览器的使用者还是比较多.作为平台维护的我不论…

css不同浏览器兼容性调试 --- 转自: [http://wo.115.com/?ct=detail&id=31733&bid=1018841]

css不同浏览器兼容性调试 IE6.0,IE7.0与Firefox的CSS兼容性问题1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 width,…

div+css中常见的浏览器兼容性处理-兼容不同浏览器

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! div+css中常见的浏览器兼容性处理-兼容不同浏览器…

笔试常考--浏览器兼容性问题及解决方案（CSS）

问题一:不同浏览器的标签默认的外补丁和内补丁不同问题现象:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 解决方案:css里加: ;;} 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的css文件开头都会用通配符*来设置各个标签的内外补丁是0. 问题二:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大问题症状:常见症状是ie6中后面的一块被顶到下一行. 解决方案:在float的标签样式控制中加入…

常见浏览器兼容性问题与解决方案css篇

浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:CSS里 *{margin:0;padding:0;} 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0. 浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大问题症状:常见症状…

常见的浏览器兼容性问题与解决方案——CSS篇

1.不同的浏览器的标签默认的外补丁和内补丁不同问题症状:随便写几个标签,不加样式控制的情况下,各自的margin和padding差异较大. 碰到频率:100% 解决方案:初始化CSS的默认样式,*{margin:0;padding:0}.也可以使用其他网站的初始化代码. 备注:这个是最常见的也是最容易解决的一个浏览器兼容性问题. 2.块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大问题症状:常见的是IE6中后面的一块被顶到下一行. 碰到频率:90% 解…

html标签和css基础语法与浏览器兼容性等相关基础学习

<h3>前端日常</h3> <form action="https://www.baidu.com"> <table border="1px" cellspacing="0px"> <thead></thead><tbody> <col span=&qu…

前端研究CSS之文字与特殊符号元素结合的浏览器兼容性总结

页面布局里总是会有类似 “文字 | 文字” 的设计样式,不同的浏览器存在严重偏差. 有兼容问题就要解决,下面总结了3种解决方案,分享给大家: 一.系统默认的样式 1.元素换行的段落 <div class="txt"> <a href="">文字链接</a> <em>|</em> <a href="">文字链接</a> <em>|</em>…

HTML`CSS_网站页面不同浏览器兼容性问题解决

目前,最为流行的浏览器共有五个:分别是ie,Edge浏览器(属于微软),火狐,谷歌(chrome)Safari和Opera五大浏览器. Trident内核:IE ,360,,猎豹,百度: Gecko内核:火狐----------->这个浏览器内核是开源的浏览器内核,插件非常多,-------------->缺点:打开速度慢(加载flash插件)<-----额外介绍----->. Presto内核:Opera7及以上版本 Webkit:遨游,苹果 ,symbian:Safari.Ch…

IE浏览器和Firefox浏览器兼容性问题及解决办法

IE浏览器和Firefox浏览器兼容性问题及解决办法为了方便大家阅读代码,以下以 IE 代替 Internet Explorer,以 MF/FF 代替 Mozzila Firefox : 1.//window.event IE:有window.event对象 FF:没有window.event对象. 可以通过给函数的参数传递event对象.如onmousemove=doMouseMove(event) 解决方法:var event = event || window.event;一个示例: <…

CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案

一.浏览器兼容 1.1.概要世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要可以分类为: 1).CSS兼容2).JavaScript兼容3).HTML兼容这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加…

web前端开发浏览器兼容性 - 持续更新

浏览器兼容性问题又被称为网页或网站兼容性问题:不同浏览器内核及所支持的html等网页语言标准不同,不同客户端环境(如分辨率不同)造成实际显示效果未能达到预期理想效果首先我们来看一下目前市面上常见的一些浏览器:ie.chrome.firefox.safari.opera.maxthon.360.qq.yy.uc.sogou.2345.淘宝.猎豹.世界之窗等其中表现很出色的有chrome.firefox.safari等:而表现极差的就是ie6/7内核浏览器了,我们的兼容性工作大半都是围绕这两个浏…

【web前端开发】浏览器兼容性处理

1.居中问题div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto;2.高度问题两上下排列或嵌套的div,上面的div设置高度(height),如果div里的实际内容大于所设高度,在FF中会出现两个div重叠的现象:但在IE中,下面的div会自动给上面的div让出空间所以为避免出现层的重叠,高度一定要控制恰当,或者干脆不写高度,让他自动调节,比较好的方法是 height:100%;但当这个div里面一级的元素都float了的时候,则需要在div块的最后,…

最全的CSS浏览器兼容问题（转至http://68design.net/Web-Guide/HTMLCSS/37154-1.html）

最全的CSS浏览器兼容问题 CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,…

JQuery中关于浏览器兼容性的问题

前言 LIUWE JQuery是一个特别强大的javascript代码库,,它的操作DOM的能力是相当强大的,JQuery可以说是支持各大主流浏览器,但是随着时代的不断发展,浏览器是在不断的更新变换的,浏览器界的前带头大哥IE,其影响力还是稍微有那么一点点的.虽然最终还是屈服了,但是还是有那么一群IE6.7.8的老用户,为了满足各种用户的需求,JQuery可以说是做的非常好的. 其实JQuery也是在不断的发展,更新版本的,在JQuery的2.0版本以前还是在考虑着这些IE6.7.8的老…

【css 浏览器兼容性问题集合】的更多相关文章