Some little knowledge about CSS hack
我们在页面布局时，会用到很多CSS样式，但是有些样式在火狐可以正常显示，在谷歌就不行，这时候就涉及到浏览器的兼容性，这篇文章就和大家讲讲什么是CSS hack，以及CSS hack的分类和用法，有需要的朋友可以参考一下，希望对你有用。
什么是CSS hack
CSS hack由于不同的浏览器，比如IE6,IE7,Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
CSS hack分类
hack主要分为CSS选择器hack、CSS属性hack、IE条件注释hack。
CSS选择器hack：比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}等。
CSS属性hack：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识等。
IE条件注释hack：
针对所有IE：
针对IE6及以下版本：
这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
书写顺序，一般是将识别能力强的浏览器的CSS写在前面。
用法
比如要分辨IE6和firefox两种浏览器，可以这样写：
div{
background:green; /* for firefox */
*background:red; /* for IE6 */ (both IE6 && IE7)
}可以看到在IE6中看到是红色的，在firefox中看到是绿色的。
在firefox中，它是识别不了后面的那个带星号的东西是什么的，于是将它过滤掉，解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。
在IE6中，它两个background都能识别出来，它解析得到的结果是:div{background:green;background:red;},于是根据优先级别，处在后面的red的优先级高，于是当然这个div的背景颜色就是红色的了。
浏览器识别
<!DOCTYPE html>
<html>
<head>
<title>Css Hack</title>
<style>
#test
{
width:300px;
height:300px;
background-color:blue; /*firefox*/
background-color:red\9; /*all ie*/
background-color:yellow\0; /*ie8*/
+background-color:pink; /*ie7*/
_background-color:orange; /*ie6*/
}
:root #test { background-color:purple\9; } /*ie9*/
@media all and (min-width:0px){ #test {background-color:black\0;} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/
</style>
</head>
<body>
<div id="test">test</div>
</body>
</html>上面这段代码大家可以直接copy出来，保存成html在各浏览器试试。分析：
（1）background-color:blue; 各个浏览器都认识，这里给firefox用；
（2）background-color:red\9; \9所有的ie浏览器可识别；
（3）background-color:yellow\0; \0 是留给ie8的，但笔者测试，发现最新版opera也认识，汗。。。不过且慢，后面自有hack写了给opera认的，所以，\0我们就认为是给ie8留的；
（4）+background-color:pink; + ie7定了；
（5）_background-color:orange; _专门留给神奇的ie6；
（6）:root #test { background-color:purple\9; } :root是给ie9的，网上流传了个版本是 :root #test { background-color:purple\0;}，新版opera也认识，所以经笔者反复验证最终ie9特有的为:root 选择符 {属性\9;}
（7）@media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。
（8）@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。
The above is the detailed content of Some little knowledge about CSS hack. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Demystifying Screen Readers: Accessible Forms & Best Practices
Mar 08, 2025 am 09:45 AM
This is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out "Managing User Focus with :focus-visible". In
Create a JavaScript Contact Form With the Smart Forms Framework
Mar 07, 2025 am 11:33 AM
This tutorial demonstrates creating professional-looking JavaScript forms using the Smart Forms framework (note: no longer available). While the framework itself is unavailable, the principles and techniques remain relevant for other form builders.
Adding Box Shadows to WordPress Blocks and Elements
Mar 09, 2025 pm 12:53 PM
The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.
Working With GraphQL Caching
Mar 19, 2025 am 09:36 AM
If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or
Making Your First Custom Svelte Transition
Mar 15, 2025 am 11:08 AM
The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.
Show, Don't Tell
Mar 16, 2025 am 11:49 AM
How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about
Classy and Cool Custom CSS Scrollbars: A Showcase
Mar 10, 2025 am 11:37 AM
In this article we will be diving into the world of scrollbars. I know, it doesn’t sound too glamorous, but trust me, a well-designed page goes hand-in-hand
What the Heck Are npm Commands?
Mar 15, 2025 am 11:36 AM
npm commands run various tasks for you, either as a one-off or a continuously running process for things like starting a server or compiling code.
