浏览器兼容性问题

最新推荐文章于 2021-05-10 15:47:56 发布

慢慢走的小可爱

最新推荐文章于 2021-05-10 15:47:56 发布

阅读量104

点赞数

本文链接：https://blog.csdn.net/zxjsm/article/details/102807127

版权

css_hacks

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<!-- 只判断IE浏览器：只有在IE浏览器中才能解析下面p -->
    <!-- 以下不是注释就是这样语法规则 -->
<body>
    




    <!--[if IE]> 
 <p class='test'>你在非IE中将看不到我的身影</p> 
 
  <div class='box'>ffff</div>
<![endif]-->



<!-- 如果是IE 浏览器才能解析 以下样式 -->
    <!--[if IE]> 
<style> 
 .test{color:red;} 
 .box{width: 100px;height: 100px;border: 1px solid red; border-radius: 50%;}
  @media screen and (min-width: 480px) {
            body{
                background-color: red;
            }
        }
</style> 
<![endif]-->


    <!--[if lt IE 9]> 
 <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
 <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> 
<![endif]-->
</body>

</html>
<!-- 如果小于IE9以下浏览器 才能导入库 -->
<!-- 
    html5shiv 是一个针对IE浏览器的HTML5 javascript补丁，目的是让IE识别并支持HTML5元素
    respond.js,对前端第三方技术的补丁


    if ite IE9  小于等于IE9
    if gt IE9   大于IE9
    if gte IE9  大于等于IE9
    if ! IE     非IE浏览器
    if IE       支持IE浏览器
-->
<!-- 语法 -->
<!-- if条件 -->
    需要解析的内容
<!-- ! endIf -->

IE补丁：
@media IE9

<!-- 
    学习css hask目的:了解即可，不要求使用 
    1.知道语法
    2.万一看到这样代码，可以看懂 并且可以修改
    3.万一遇到低版本IE 678 ，css hask是解决兼容性问题方案（不一定有效）

    注意：只是补丁，不是创造
-->

css_hack浏览器特殊标志

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .text{
        /* ie8 */
        color: blueviolet;
        /* ie7 */
        *color:green;
        /* for IE6 and earlier */
        _color:red;

    }
</style>
<body>
    <!-- 加上一些只有特定浏览器才能识别的hack前缀 -->
    <p class="text">我是矩形</p>
    <!-- 

        *html *前缀只对IE6生效 
*+html *+前缀只对IE7生效 
@media screen\9{...}只对IE6/7生效 
@media \0screen {body { background: red; }}只对IE8有效 
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效 
@media screen\0 {body { background: green; }} 只对IE8/9/10有效 
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
     -->
</body>
</html>

私有属性

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div {
        height: 100px;
        width: 100px;
        border: 1px solid red;
        -moz-border: 1px solid red;
        -ms-border: 1px solid red;
        -webkit-border: 1px solid red;
        -o-border: 1px solid red;
    }
</style>

<body>
    <div>
        - -moz代表firefox浏览器私有属性
        - -ms代表IE浏览器私有属性
        - -webkit代表chrome、safari私有属性
        - -o代表opera私有属性
    </div>
</body>
</html>

慢慢走的小可爱

关注

0
点赞
踩
0

收藏

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

css_hacks<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
复制链接

扫一扫