css hack解决浏览器的兼容性问题

最新推荐文章于 2021-08-04 08:57:46 发布

黄不逗

最新推荐文章于 2021-08-04 08:57:46 发布

阅读量207

点赞数

分类专栏： CSS 系列

本文链接：https://blog.csdn.net/weixin_45172119/article/details/107043841

版权

CSS 系列专栏收录该内容

27 篇文章 0 订阅

订阅专栏

概念

 CSS Hack用来解决浏览器的兼容性问题，为不同版本的浏览器定制编写不同的CSS效果，使用每个浏览器单独识别的样式代码，控制浏览器的显示样式。
Hack分类
1. CSS属性前缀法
2. 选择器前缀法
3. IE条件注释法

CSS属性前缀法

属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。
在这里插入图片描述

.box{ width:100px; height:100px; background: red; _background:blue;}

注意\9、\0的写法

.box{ width:100px; height:100px; background: red; background:blue\9;}

.box{ width:100px; height:100px; background: red; background:blue\0;}

选择器前缀法

选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

在这里插入图片描述

 *html .box{ width:100px; height:100px; background:red;}

IE条件注释法

这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--[if gte IE 7]>
    <div class="box"></div>
    <![endif]-->
</body>

</html>

body部分中注释，如果不是对应的IE版本浏览器不会识别的。

黄不逗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css hack解决浏览器的兼容性问题

概念 CSS Hack用来解决浏览器的兼容性问题，为不同版本的浏览器定制编写不同的CSS效果，使用每个浏览器单独识别的样式代码，控制浏览器的显示样式。Hack分类1. CSS属性前缀法2. 选择器前缀法3. IE条件注释法CSS属性前缀法属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。.box{ width:100px; height:100px; background: red; _background:blue;}注意\9、
复制链接

扫一扫