CSS Hack 汇总-程序员宅基地

屏蔽IE浏览器(也就是IE下不显示)
*:lang(zh) select {font:12px !important;} /*FF,OP可见*/
select:empty {font:12px !important;} /*safari可见*/

这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。

仅IE7识别
*+html {…}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。

IE6及IE6以下识别
* html {…}
这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
html/**/ >body select {……}
这句与上一句的作用相同。

仅IE6不识别
select { display /*IE6不识别*/:none;}
这里主要是通过CSS注释分开一个属性与值,流释在冒号前。

仅IE6与IE5不识别
select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。

仅IE5不识别
select/*IE5不识别*/ { display:none;}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别

盒模型解决方法
selct {width:IE5.x宽度; voice-family :""}""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。

清除浮动
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级做一次定义,那么就可以解决这个问题 。

截字省略号
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。

只有Opera识别
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。

以上都是写CSS中的一些HACK,建议遵循正确的标签嵌套(div ul li 嵌套结构关系),这样可以减少你使用Hack的频率,不要进入理解误区,并不是一个页面就需要很多的hack来保持多浏览器兼容),很多情况下也许一个Hack都不用也可以让浏览器工作得非常好,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

IE5.x的过滤器,只有IE5.x可见
@media tty {
i{content:"";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */

IE5/MAC的过滤器,一般用不着
/**//*/
@import "ie5mac.css";
/**/

下面是IE的条件注释,个人觉得用条件注释调用相应 Hack是比较完美的多浏览器兼容的解决办法。把需要hack的地方单独放到一个文件里面,当浏览器版本符合的时候就可以调用那个被Hack的样式,这样不仅使用起来非常方便,而且对于制作这个CSS本身来讲,可以更严格的观察到是否有必要使用hack,很多情况下,当我本人写CSS如果把全部代码包括Hack都写到一个CSS文件的时候的时候会很随意,想怎么Hack就怎么Hack,而你独立出来写的时候,你就会不自觉的考虑是否有必要Hack,是先Hack CSS?还是先把主CSS里面的东西调整到尽可能的不需要Hack?当你仅用很少的Hack就让很多浏览器很乖很听话的时候,你是不是很有成就感呢?你知道怎么选择了吧~~呵呵

IE的if条件Hack 自己可以灵活使用参看这篇IE条件注释
Only IE
所有的IE可识别

只有IE5.0可以识别
Only IE 5.0+
IE5.0包换IE5.5都可以识别

仅IE6可识别
Only IE 7/-
IE6以及IE6以下的IE5.x都可识别
Only IE 7/-
仅IE7可识别

部分Hack 在目前浏览器中的适用情况对照图。 

常用 css hack

 

原文地址:http://www.keephelp.com/css/all-css-hack/
转载请注明出处,非常感谢!

转载于:https://www.cnblogs.com/guodapeng/archive/2008/03/30/1129897.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_34414650/article/details/94074318

智能推荐

取两个集合List的交集、补集、并集、差集的几种方式_取两个list的交集-程序员宅基地

文章浏览阅读2w次,点赞16次,收藏66次。import org.apache.commons.collections.CollectionUtils;public class Test { public static void main(String[] args) { String[] arr1 = new String[]{"A", "B", "C", "D", "E", "F", "G"}; ..._取两个list的交集

JVM性能检测工具与调优案例实战_vmjy-程序员宅基地

文章浏览阅读2.4k次,点赞2次,收藏5次。为了验证自己的猜想,于是准备登录后台去测试下,结果在测试的过程中发现到处订单的按钮前端居然没有做点击后按钮置灰交互事件,结果按钮可以一直点,因为导出订单数据本来就非常慢,使用的人员可能发现点击后很久后页面都没反应,结果就一直点,结果就大量的请求进入到后台,堆内存产生了大量的订单对象和EXCEL对象,而且方法执行非常慢,导致这一段时间内这些对象都无法被回收,所以最终导致内存溢出。解决方式除了调整本地内存大小之外,也可以在出现此异常时进行捕获,手动触发GC(System.gc())。_vmjy

mysql主键id的生成方式(自增、唯一不规则)_自增id改uuid作为主键id-程序员宅基地

文章浏览阅读4.4w次,点赞8次,收藏33次。1、利用uuid函数生成唯一且不规则的主键idsql:CREATE TABLE `test` ( `id` varchar(100) COLLATE utf8_estonian_ci NOT NULL COMMENT '唯一不重复', `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, `update_tim..._自增id改uuid作为主键id

VSCode中值得推荐的常用的33个高效前端插件「效率篇」_json to ts-程序员宅基地

文章浏览阅读1.5k次。VSCode 是我们前端开发的一个强大的IDE,所以选择趁手好用的插件是提高开发效率,然后剩下的时间用来摸鱼是很有必要滴。_json to ts

Android 保存图片成功后,更新到相册_安卓图库手动更新-程序员宅基地

文章浏览阅读470次。Android下载保存图片,相册不显示图片一下两种方式功参考:作者也是遇到了,写出来供参考,也记下来在清单文件加上 android:requestLegacyExternalStorage="true" 保存成功后,通知相册更新MediaScannerConnection.scanFile(context, new String[]{TargetPath}, null, null);//path:图片保存的路径..._安卓图库手动更新

机器学习入门:玩转sklearn库,AI写作-程序员宅基地

文章浏览阅读283次,点赞19次,收藏8次。sklearn库是一个功能强大且广泛应用的工具,它帮助我们在数据科学和人工智能领域中构建机器学习模型。通过学习和掌握其主要功能和使用方法,我们可以更加高效地进行数据分析和挖掘,为实际问题提供解决方案。希望这篇介绍能够帮助初学者更好地理解和应用sklearn库,进一步探索数据科学和人工智能的奥秘。AI写作

随便推点

如何获取永久头像地址(非临时)微信小程序_微信头像真实地址-程序员宅基地

文章浏览阅读702次,点赞7次,收藏10次。找了很久也没有找到真实的图片链接地址的获取方式。如果有大佬知道如何弄,还请评论区指条明路。本文用base64代替真实头像地址。后端有python和golang两种方式,供学习参考。博文仅针对这一个功能,其它的比如wxml和wxss设置,或者微信昵称的获取就不多介绍了。_微信头像真实地址

热修复:关于Tinker在Android9.0机器上合成失败的解决方案_tinker在哪个版本不适用了-程序员宅基地

文章浏览阅读1.8k次。Tinker大部分网络所写的文章采用的Tinker版本号都是2018年或者之前的,相对来说比较老旧,去GitHub下载的Demo版本还是解决方法更新Tinker版本,然后可以愉快的继续使用Tinker热修复啦。 TINKER_VERSION=1.9.2TINKERPATCH_VERSION=1.2.2 特意去官网找了下更新日志Tinker官网 发现以下版本可以支持A..._tinker在哪个版本不适用了

应用逻辑回归方法对鸢尾花进行分类_第1关:逻辑回归--鸢尾花数据集分类-程序员宅基地

文章浏览阅读1.4k次。应用逻辑回归方法对鸢尾花进行分类1. 实验目标逻辑回归了解Iris数据集2. 本次实验主要使用的 ????????????ℎ????????Python 库名称版本简介????????????????????numpy1.16.21.16.2线性代数????????????????????????−????????????ℎ????????opencv−python4.1.1.264.1.1.26计算机视觉???????????????????????_第1关:逻辑回归--鸢尾花数据集分类

Windows7+Windows10原版镜像集合_windows7镜像 csdn-程序员宅基地

文章浏览阅读8.8k次。https://blog.csdn.net/u012321199/article/details/79561198_windows7镜像 csdn

AttributeError: module ‘sacrebleu‘ has no attribute ‘compute_bleu‘_module 'sacrebleu' has no attribute 'compute_bleu-程序员宅基地

文章浏览阅读671次。fairseq训练时出现:原因:sacrebleu 版本不对。解决办法:pip install sacrebleu==1.5.1_module 'sacrebleu' has no attribute 'compute_bleu

超高频RFID R200系列远距离一体化读写器开发测试_ypd-r200 rfid-程序员宅基地

文章浏览阅读3.6k次,点赞2次,收藏33次。超高频UHF RFID R200系列远距离一体化读写器开发测试概述R200系列远距离一体化读写器为一体化设计的UHF 频段读写器,其具有多协议兼容、读取速率快、多标签识读、防水型外观设计等优点,可广泛的应用于各种RFID 系统中。 广泛应用于仓储管理、供应链管理、车辆管理、生产线管理、溯源管理、资产管理、人员管理、考勤管理、产品防伪管理等多种场合。UHF-R200 是一款超高频读写模块,体积小,功耗低,最大功率为28dbm,并且功率可调;主要用于..._ypd-r200 rfid