CSS兼容各浏览器的hack

CSS兼容各浏览器的hack:建议:尽可能的手写代码,可以有效的提高学习效率和深度.浏览器的种类多,麻烦自然也多,主要是各种浏览器对某些属性的渲染效果并不相同,所以有时候需要专门针对特定浏览器或者特定版本书写CSS代码,这样就需要用到所谓的“CSS Hack”,下面以一段实例的形式介绍一下个浏览器hack. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content…

css兼容各个浏览器的三角形图标

css兼容各个浏览器的三角形图标在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的“吹毛求疵”,越来越多的前端开发者开始“返璞归真”,在能不使用图片的场景中减少图片使用,css图标相对于图片还有个优势是我们可以方便的定制图标的大小以及颜色. css实现三角形图标已不是什么新鲜技术,之前也有很多相关的技术文章,这篇文章主要是分析下在实际场景中使用时遇到的问题以及如何回避这些问题.基本原…

兼容各种浏览器的hack写法

1.Firefox @-moz-document url-prefix() { .selector { property: value; } }上面是仅仅被Firefox浏览器识别的写法具体如:@-moz-document url-prefix() { .demo { color:lime; } } 支持Firefox的还有几种写法: /* 支持所有firefox版本 */ #selector[id=selector] { property: value; } 或者: @-moz-docume…

css兼容大部分浏览器的文本超出部分显示省略号

css之字体多行省略(兼容大部分浏览器) 字体单行显示省略号 <style> .box1{ width: 500px; height: 1.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </style> <div class="box1"> 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 &…

纯css兼容个浏览器input[type='radio']不能自定义样式

各个浏览器对于表单input[type='radio'].input[type='checkbox']的样式总是各有差异 //html <div class="remember-account"> <input type="checkbox"> <span>记住账号</span> </div> //css .remember-account { display: inline-block; font-s…

兼容不同浏览器的 CSS Hack 写法

所谓 CSS Hack,是指在 CSS 代码中嵌入诸如 *,*html 等代码,方便于独立控制某种浏览器的具体样式.比如有些 CSS Hack 只能被 IE6 或 IE7 识别,而 Firefox 等浏览器则不能识别.这样一来可以有效控制 CSS 在不同浏览器的表现,避免撰写多个 CSS 文件. 芒果在这里大致整理了常用 CSS Hack 的写法,帮助你更好地控制页面呈现: 1. * 符号 IE 浏览器能识别 * 符号,但其他浏览器诸如 Firefox.Opera.Chrome 等不能识别 *…

【原】CSS实现背景透明，文字不透明，兼容所有浏览器

11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐性节日,以庆祝自己仍是单身一族为骄傲,而如今是各大商家以脱光为由打折促销的时期,成为了所谓的”购物节“,双11也算了,后面还要搞双12,不得不吐槽下. 于是呢,熬夜加班做了11.11的活动,在PC端遇到了透明背景和透明图片的问题,其实以前也遇到过,只是没有总结起来,就忘记了,这次又撞墙了,必须记录下…

主流浏览器css兼容问题的总结

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

CSS实现背景透明，文字不透明，兼容所有浏览器

11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐性节日,以庆祝自己仍是单身一族为骄傲,而如今是各大商家以脱光为由打折促销的时期,成为了所谓的"购物节",双11也算了,后面还要搞双12,不得不吐槽下. 于是呢,熬夜加班做了11.11的活动,在PC端遇到了透明背景和透明图片的问题,其实以前也遇到过,只是没有总结起来,就忘记了,这次又撞墙了,…

div+css兼容 ie6_ie7_ie8_ie9_ie10和FireFox_Chrome等浏览器方法

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

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…

加特殊符号星号斜杠反斜杠/* \ */ !important等让css实现兼容各个浏览器的技巧的代码

在编写css样式表的时候常常会碰到一写浏览器兼容的问题,象是不同内核的浏览器显示就不一定相同,不同版本的的浏览器也会产生上下兼容的问题,如何解决这些问题成了我们苦恼的问题,如果你对css hack技术很了解的话,那这就是太简单不过了,不过对于那些不怎么解的人来说可真成了他们所苦恼的事.在这就从赵磊官方博客引来一篇文章来介绍兼容各个浏览器的技巧.但是你也不要认为只要是浏览器显示出现差错就事浏览器的问题,也很可能是你的结构不好,建议你好好去学习一下语义结构,毕竟盖房子要先搭钢筋的. 1,盒…

css兼容处理-hack

浏览器兼容之旅的第二站:各浏览器的Hack写法 Browser CSS Hacks Moving IE specific CSS into @media blocks Detecting browsers javascript hacks Browser Specific Hacks Browser-Specific CSS Hacks CSS hacks 大家平时看得多的应该是IE浏览器的hack写法比较多,但对于现代浏览器,比如说Safari.Chrome.Firefox等浏览器的hack写…

纯css制作带三角border篇(兼容所有浏览器)

今天帅哥给你们介绍下,如何用 border 来制作三角. html 代码如下: 复制代码代码如下: <div class="arrow-up"></div><div class="arrow-down"></div><div class="arrow-left"></div><div class="arrow-right"></div&…

Css:背景色透明，内容不透明之终极方法！兼容所有浏览器

转载 http://www.cnblogs.com/jikey/archive/2012/08/31/2665880.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/x…

兼容主流浏览器的CSS透明代码

透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;}filter:alpha(opacity=50):这个是为IE6设的,可取值在0-100,其它三个0到1.-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器.-khtml-opacity: 0…

一个酷炫的，基于HTML5,Jquery和Css的全屏焦点图特效，兼容各种浏览器

基于HTML5和CSS的焦点图特效,梅花图案的背景很有中国特色,而且还会动哦,效果超炫,推荐下载! 演示图 html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh…

（转）兼容主流浏览器的CSS透明代码

透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } filter:alpha(opacity=50):这个是为IE6设的,可取值在0-100,其它三个0到1.-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器.-khtml-opacity: 0.5…

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

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

CSS 实现图片灰度效果兼容各种浏览器

CSS 实现图片灰度效果兼容各种浏览器如360浏览器 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. 方式1. IE滤镜 img { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } //标准写法 img { filter:Gray; } //简写 IE系列浏览器都支持IE滤镜的这一属性,非IE浏览器不支持. 方…

浏览器 CSS 兼容写法的测试总结

做前端最讨厌的就是 IE6,7,8,虽然被淘汰的浏览器,但是在中国用户仍然很多,不可能像国外网站一样直接就不管它了,这样会流失很多流量啊. 现在有了IE9,IE10还好些,几乎和 Chrome,Firefox 差别不大了,但是IE6,IE7,IE8还是要做单独兼容的,这里总结下兼容方法: 对于 IE6.IE7.IE8 进行 CSS 兼容方法可以看看这篇文章 http://blog.csdn.net/zhouzme/article/details/18901657 以下方法均在 IE6.IE7.I…

css gray，grayscale，css变灰兼容大部分浏览器

css gray,grayscale,css变灰兼容大部分浏览器 html { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0…

Normalize.css源码注释翻译&浏览器css兼容问题的理解

版本v5.0.0源码地址: https://necolas.github.io/normalize.css/5.0.0/normalize.css 翻译版: /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ /** * 1. 更改所有浏览器中的默认字体系列(意见). * 2. 更正所有浏览器中的行高. * 3. 在Windows Phone的IE或者ios上方向更改后,防止字体大小的调整. *…

兼容不同浏览器的CSS前缀-webkit-，-ms-，-moz-，-o-

笔者在工作实践中发现当需要CSS兼容不同的浏览器时,需要在CSS样式前加上不同的前缀,从而使其他浏览器也能够达到相同的页面效果. 那么我们怎么去加上这些前缀呢?我们一起带着疑问来进行学习: 1.前缀分为:-webkit-,-ms-,-moz-,-o- -webkit-:主要兼容的浏览器是:谷歌的Chrome和苹果的Safari浏览器: -ms-:主要兼容的浏览器是:微软的Internet Explorer.Edge浏览器: -moz-:主要兼容的浏览器是:火狐的Firefox浏览器: -o-:主…

兼容主流浏览器的css渐变色

网页中的渐变色区域,渐变色背景,一般都是通过ps图片方法来实现,但是图片放得多了会影响网页的打开速度,本文介绍的就是用纯 CSS 实现 IE .Firefox.Chrome 和和Safari都支持的渐变色效果. 一. 支持IE的css渐变色设置 FILTER: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#EEEEEE', endColorstr='#ffffff'); 修改参数:Gradie…

在不同的浏览器使用不同的css样式,解决浏览器兼容问题

区别IE6与FF: background:orange; *background:blue; 区别IE6与IE7: background:green !important; background:blue; 区别IE7与FF: background:orange; *background:green; 方法一:在同一个CSS样式表中,使用 !important 来定义不同的值以适应Firefox和IE,例如:…

兼容各浏览器的css背景图片拉伸代码

需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , sizingMethod= 'scale' ); 在ie中试用了一下还不错,背景图片可以拉伸了,但看到用了滤镜,看来火狐.谷歌等应该不兼容吧,用火狐.谷歌测试了下,背景图片没有了.东找西找,终于找到了可以兼容各个浏览器的css背景图片拉伸代码: background-image:url(***.jpg…

CSS兼容问题实用建议

CSS兼容问题,是美工最头痛的问题.做测试时,用谷哥和360浏览器(最新)都没有什么问题,用 IE6/IE8测试,问题就冒出来了.微软现在出IE10,我电脑上已经无法用IE6准确测试,IE-TESTER只能做参考作用.这个月,针对CSS兼容问题,总结了一些实用建议. 1.尽量少用margin属性,就算要用,也是在容器内用.一般IE6出问题,就是margin问题.不用margin, 怎么隔开DIV或其它容器?直接用高度,页面确定后,高度一般不变,所以高度写高点,就可以将它下面的块挤下去,留出空…

【转】让Bootstrap 3兼容IE8浏览器

FROM : http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单.按钮组.按钮下拉菜单.导航.导航条.面包屑.分页.排版.缩略图.警告对话框.进度条.媒体对象等.Bootstrap他们预先定义好,等要进行正式制作网页的时候,…

让Bootstrap 3兼容IE8浏览器

最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单.按钮组.按钮下拉菜单.导航.导航条.面包屑.分页.排版.缩略图.警告对话框.进度条.媒体对象等.Bootstrap他们预先定义好,等要进行正式制作网页的时候,我们可以直接用里面的class就可以了. 今天不多介绍Bootstrap的功能,以后有机会可以重点介绍一下,确实十分优秀.响应式布局,定制性强,组…

【CSS兼容各浏览器的hack】的更多相关文章