CSS跨浏览器(转)

本文将介绍兼容IE+、FF、Chrome、Safari、Opera的技巧

一、CSS HACK

专门为某版本的浏览器设置样式,从而解决浏览器显示的差异

?





1

2

3

4

5

6

7

8

9

selector { +property:value; } 在属性名前加上加号"+",这个Hack只有IE系列可以识别.

selector { *property:value; } 在属性名前加上星号"*",这个Hack只有IE系列可以识别.

selector { _property:value; } 在属性名前加上下划线"_",这个Hack只有IE系列 (除IE7外) 识别.

* html selector{ property:value; } 在选择器上运用继承法 * html selector, 这个Hack只有IE系列 (除IE7外) 可以识别.

html/**/ >body  selector { property:value; } 在选择器上运用继承法 html/**/ >body  selector ,这个Hack只有IE系列 (除IE7外) 可以识别.

selector { property/**/:value; } 在属性名和冒号":"之间加入注释,屏蔽IE6用.

selector/**/ { property/**/:value; } 在选择器和花括号"{"之间以及在属性名和冒号":"之间加入注释,屏蔽IE5和IE6用 (不屏蔽IE5.5) .

select/**/ { property:value; } 在选择器和花括号"{"之间加入注释,屏蔽IE5用.

*+html  selector { property:value !important; } 在选择器上运用继承法 *+html selector 再加上 !important, 这个Hack只有IE7可以识别.

Firefox:

?





1

*:lang(lang) selector { property:value !important; } 用伪类lang(语言)再加上!important进行定义的话,目前只有Firefox可以识别.

Opera:

?





1

@media all and (min-width: 0px){ selector { property:value; } } 利用特殊继承法进行定义的话,目前只有Opera可以识别.

CSS跨浏览器(转),布布扣,bubuko.com

时间: 2024-10-25 00:54:43

CSS跨浏览器(转)的相关文章

[译] 如何调试CSS的跨浏览器样式bug

http://www.cnblogs.com/newyorker/archive/2013/01/22/2870682.html 原文 http://www.stubbornella.org/content/2012/05/02/cross-browser-debugging-css/ 作者为YAHOO前端工程师. 首先要做的是挑选一个好的浏览器.我的选择是Chrome,因为它拥有强大的调试工具.当我在Chrome上完成调试后,我会接着在Safari或者Firefox上调试. 如果在这些“好的”

跨浏览器开发:CSS

理解CSS盒子模型 如果不需要很多奇巧淫技的跨浏览器兼容的 CSS 代码,透彻地理解 CSS 盒子模型是首要事情,CSS 盒子模型并不难,且基本支持所有浏览器,除了某些特定条件下的 IE 浏览器.CSS 盒子模型负责处理以下事情: ◆一个blcok(区块)级对象占据多大的空间 ◆该对象的边界,留白 ◆盒子的尺寸 ◆盒子与页面其它元素的相对位置 CSS 盒子模型有以下准则: ◆Block (区块)对象都是矩形 (事实上所有对象都如此) ◆其尺寸由 width, height, padding, b

CSS实现跨浏览器的box-shadow盒阴影效果(2)

一.前言 我之前曾写过一篇关于实现跨浏览器实现box-shadow效果的文章,本文虽然题目类似,但是核心部分是有差异的.前面的文章虽然实现IE下的盒阴影效果也是使用的滤镜,但是使用的是shadow滤镜,这种滤镜的效果很牵强,效果过渡不自然,见下图: 您可以狠狠地点击这里:IE下阴影不自然demo 而本文实现的IE下的盒阴影效果就相对非常自然,而且还支持内阴影的UI表现.到底是如何实现的,究竟效果如果,请继续浏览. 二.浏览器纯爷们模式下的支持情况 CSS3 box-shadow属性基本上所有的现

CSS实现跨浏览器的box-shadow盒阴影效果(1)

一.无关紧要碎碎念 在web页面的ui表现中,投影效果可以说是非常常见的一种表现效果了.例如开心网的头像修饰效果: 然而,在CSS2的时代,我们多半使用图片实现类似效果,或是使用CSS其他属性模拟阴影效果,但是,现在,CSS3的崛起使得这个问题已经不再是是个问题了,本文就将展示如何实现跨浏览器的盒阴影效果. 二.标准方法 标准方法当然就是指使用CSS3的方法了,这个应该不少同行应该知道,参见如下代码: .shadow { -moz-box-shadow: 3px 3px 4px #000; -w

转载于山边小溪的博客--编写跨浏览器兼容的 CSS 代码的金科玉律

http://www.cnblogs.com/lhb25/archive/2010/06/19/1760786.html   原始网页 作为 Web 设计师,你的网站在各种浏览器中有完全一样的表现是很多人的目标,然而这是一个永远无法真正实现的目标,很多人认为,完美的跨浏览器兼容并不必要,这样说虽然没错,但在很多情形,一种近似的兼容还是很容易实现的,本文讲的是各种跨浏览器兼容的 CSS 编码准则和技巧. 理解 CSS 盒子模型 如果你想实现不需要很多奇巧淫技的跨浏览器兼容的 CSS 代码,透彻地理

实现跨浏览器html5表单验证

div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: right; clear: right; } .clearfix:after{ content: ""; display:block; clear: both; } .figcaption{ clear: both; color: #999; padding-top: 10px; text

使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板. Zero Clipboard的安装方法 首先需要下载 Zero Clipboard的压缩包,解压后把文件夹中两个文件:ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的项目中. 然后把在你要使用复制功能的页面中引入Zero

Python多线程Selenium跨浏览器测试

前言 在web测试中,不可避免的一个测试就是浏览器兼容性测试,在没有自动化测试前,我们总是苦逼的在一台或多台机器上安装N种浏览器,然后手工在不同的浏览器上验证主业务流程和关键功能模块功能,以检测不同浏览器或不同版本浏览器上,我们的web应用是否可以正常工作. browser.png 下面我们看看怎么利用python selenium进行自动化的跨浏览器测试. 什么是跨浏览器测试 跨浏览器测试是功能测试的一个分支,用以验证web应用能在不同的浏览器上正常工作. 为什么需要跨浏览器测试 通常情况下,

jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、

脚 本 之 家 www.jb51.net 脚本云 专题 素材下载 电子书 软件下载 源码下载 服务器常用软件 a5交易 首页 网页制作 脚本专栏 脚本下载 网络编程 数据库 CMS教程 电子书籍 平面设计 媒体动画 操作系统 网站运营 网络安全 YUI.Ext相关 prototype jquery dojo json lib_js js面向对象 extjs Mootools Seajs 其它 特色栏目: vbscript 正则表达式 javascript 批处理 服务器软件 素材下载 低价出售流