【css 浏览兼容问题及解决办法 （2）】的更多相关文章

css 浏览兼容问题及解决办法 （2）

1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 2.margin加倍的问题 设置为float的div在ie下设置的margin会加倍.这是一个ie6都存在的bug.解决方案是在这个div里面加上display:inline; 例如: <#div id=”imfloat”> 相应的css为 #imfloat{ float:left; margin:5…

css 浏览兼容问题及解决办法 （1）

主流浏览器css兼容问题的总结 最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8,所以调起来还是各种蛋疼. 现在就post一些做兼容的总结,可能不够全面,但是可以告诉大家如何避过一些坑.主要测试了chrome,firefox,ie8.9.11,360浏览器. 一.基本的css兼容: 1.可能很多人喜欢用css hack的形式去兼容ie浏览器,但是我自己用起来感觉其实不好使 .ie7-就不考虑了,问题在哪呢,就在ie8的甑别上,你怎么让样式只对ie8起作用.上网搜你可能会得到这样的答…

CSS常见兼容问题以及解决办法

浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况. 这里谈到的浏览器,主要指IE6/IE7/IE... FireFox Chrome Opera Safari 等. 但更多的兼容还是考虑IE6/IE7/FF之间的斗争 先来谈谈CSS Hack 我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样式,所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做 CSS hack. CSS hack主要有三种:IE条件注释法.CS…

css样式兼容不同浏览器问题解决办法

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important; 一.CSS HACK 1, !important…

关于box-shadow、border-radius不兼容ie8的解决办法

本来从css3兼容ie9+挺好的,可是总有一些共识要求ie8+,于是就有了我们的苦逼的找解决办法.之前在网上查到一些说用 PIE.htc. But 我就是按照他说的写的没有管用.请教了一下别人才会写了.就我遇到的问题来说吧. 先说 box-shadow: <style> .div{ width:500px; height:200px; border: 1px solid #eaeaea; behavior: url(pie.htc); -moz-box-shadow: 0px 0px 14px…

HTML兼容问题及解决办法

标准浏览器子元素不会撑开父元素设置好的宽度,IE6下会的: <style> .box{ width:400px;} .left{ width:200px;height:300px;background:red;float:left;} .right{ width:200px;float:right;} .div{width:180px;height:180px;background:blue;padding:15px;} </style> </head> <bod…

CSS高度坍塌原因及解决办法

在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高. 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷.由于父元素的高度塌陷了,则父元素下的所有元素都会向上移动,这样将会导致页面布局混乱. 解决办法: 1.父元素设置overflow属性设置为hidden; <!DOCTYPE html><html lang="zh-cn"><head> <meta cha…

div+css常见浏览器兼容问题以及解决办法

1.图片下方出现几像素的空白间隙问题说明:这个问题在ie6和ff(火狐)下经常见到,例如 <div><img src=""/></div>这个图片下面会有一条空白间隙,解决方法:给图上一个垂直方向的属性如:vertical-align: top(任意一个就行middle);这个问题从而延伸到,object(视频)和textarea在火狐下也会出现类似的问题,解决方法一样.细心的朋友会发现在第二节ahuing的重置代码里就有这样一个全局定义object…

Chrome不支持css字体小于12px的解决办法

我们先来看个效果图(chrome下): 从上面的图可以很明显地看出Chrome下css设置字体大小为12px及以下时,显示的都是一样大小,都是默认12px: 那么网上有一个方法就是给当前样式添加Chrome私有属性:-webkit-text-size-adjust:none; 可是我进行验证后发现并无效果.后来查资料了解到在Chrome 27之后就取消了对这个属性的支持,那么我们应该如何设置Chrome下的字体呢? 可以利用css3的缩放属性:transform:scale() .small-f…

js 浏览器兼容问题及解决办法

JS中出现的兼容性问题的总结 1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题  我们都知道js通过style不可以获取行外样式,当我们需要获取行外样式时:  我们一般通过这两个方法获取行外样式:  IE下: currentStyle  Chrome,FF下: getComputedStyle(oDiv,false)        兼容两个浏览器的写法:        if(oDiv.currentStyle){            ale…