Hack
浏览器兼容问题:针对不同的浏览器写不同的代码,显示相同的效果
分类:html hack 、css hack
- html hack
- 根据不同的浏览器写不同的html代码,需要一个辅助的代码,叫做Hack符号
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html hack</title>
<style type="text/css">
</style>
</head>
<body>
<!--以下是IE9及低版本的浏览器所能认识的-->
<!--[if lte IE 9]>
这是一段文字
<![endif]-->
</body>
</html>
if:如果 lte:<= 9:版本号
如果小于IE9版本就显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html hack</title>
<style type="text/css">
</style>
</head>
<body>
<!--以下是IE9及低版本的浏览器所能认识的-->
<!--[if lte IE 9]>
这是一段文字
<![endif]-->
<!--[if lt IE 8]>
<h1>这是一个IE8以下的版本才能看到的标题</h1>
<![endif]-->
</body>
</html>
- css的hack
针对不同的浏览器写不同的css样式 - 值的hack
对某一特定的值写hack
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css的hack</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background: skyblue;
/*在IE6以下的版本会显示金色*/
_background:gold;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
所以IE6的Hack符有:~ ! @ # $ % ^ & * ( ) + [ ] | < > ? . /
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css的hack</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background: skyblue;
/*在IE6以下的版本会显示金色*/
/*_background:gold;*/
background: red\0/;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
IE8的标识符为background:red\0/;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css的hack</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background: skyblue;
/*在IE6以下的版本会显示金色*/
/*_background:gold;*/
background: red\0/;
background: khaki\9;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
IE6,7,8,9,10的hack表示符为background: khaki\9;
- 选择器的hack
针对不同版本的选择器加载不同选择器的css
IE6及以下版本的选择器hack书写格式:
* html .XXX{
}
IE6及以下版本的选择器hack书写格式:
.XXX,{
}