zoukankan      html  css  js  c++  java
  • WEB前端:浏览器(IE+Chrome+Firefox)常见兼容问题处理--01

    兼容问题目录

    1、IE6下怪异盒模型
    2、IE6下最小高度问题
    3、IE6下不支持1px的点线
    4、IE6下内容会把父级的高度撑开
    5、IE6下只支持给a标签添加伪类
    6、IE67下不支持给块标签加display:inline-block
    7、IE8以及IE8以前的浏览器都不支持opacity

    后续兼容性问题处理链接地址:

    http://blog.csdn.net/baidu_37107022/article/details/71973570

    http://blog.csdn.net/baidu_37107022/article/details/71977053


    1、IE6下怪异盒模型

    在标准模式下的盒模型,

    盒子总宽度/高度=width/height+padding+border+margin
    

    在怪异模式下的盒模型,

    盒子的总宽度和高度是包含内边距padding和边框border宽度在内的,
    
    盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
    

    解决办法
    在css3中有一个属性box-sizing来处理是用何种模型进行解析。

    box-sizing有两个值一个是content-box,另一个是border-box

    当设置为box-sizing:content-box时,将采用标准模式解析计算,也是默认模式;

    当设置为box-sizing:border-box时,将采用怪异模式解析计算;

    目前使用此属性需要前缀如下:

    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;

    代码演示

    
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                div{
                    width: 100px;
                    height: 100px;
                    border: 10px solid #000;
                    padding: 10px;
                    background: red;
                }
            </style>
        </head>
        <body>
            <!--
                标准盒模型
                    总宽度=width+padding+border
                怪异盒模型
                    总宽度=width
    
            注意此时是没有<!DOCTYPE html>声明的       
            -->
            <div>123</div>
        </body>
    </html>
    

    什么是盒模型链接:http://blog.csdn.net/baidu_37107022/article/details/71272900

    2、IE6下最小高度问题

    解决办法
    1、overflow:hidden 推荐
    2、font-size: 0;

    代码演示

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                div{
                    height: 1px;
                    background: red;
                    /*font-size: 0;*/
                }
            </style>
        </head>
        <body>
            <!--
                IE6下块元素高度小于19px,会被当做19px来处理
                解决办法
                    1、overflow:hidden           推荐
                    2、font-size: 0; 
            -->
            <div></div>
        </body>
    </html>
    

    3、IE6下不支持1px的点线

    解决办法:
    IE6不支持一像素的点划线,用背景图代替

    代码演示

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                div{
                    width: 500px;
                    height: 100px;
                    border: 1px dotted #f00;
                }
            </style>
        </head>
        <body>
            <!--
                IE6不支持一像素的点划线,用背景图代替
            -->
            <div></div>
        </body>
    </html>
    

    4、IE6下内容会把父级的高度撑开

    解决办法
    overflow: hidden;

    代码演示

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                div{
                    width: 200px;
                    height: 200px;
                    border: 1px solid #000;
                    overflow: hidden;
                }
            </style>
        </head>
        <body>
            <!--
                IE6下内容会把父级的高度撑开
                解决办法
                    overflow: hidden;
            -->
            <div>
                这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊
            </div>
        </body>
    </html>
    

    5、IE6下只支持给a标签添加伪类

    IE6不支持除了a标签以外标签的伪类—无法解决

    代码演示

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                a:hover{
                    color: #f00;
                }
                div{
                    width: 100px;
                    height: 100px;
                    background: red;
                }
                div:hover{
                    background: green;
                }
            </style>
        </head>
        <body>
            <!--
                IE6不支持除了a标签以外标签的伪类
            -->
            <a href="#">kaivon</a>
            <div></div>
        </body>
    </html>
    

    6、IE67下不支持给块标签加display:inline-block

    无法解决

    **根本原因:**IE6、7不认识inline-block,给行内元素加上这个属性后会触发IE的haslayout特点,会让行内元素具有与inline-block一样的特征,所以它不支持块元素的inline-block。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                span,div{
                    width: 100px;
                    height: 100px;
                    background: red;
                    display: inline-block;
                }
            </style>
        </head>
        <body>
            <!--
                IE67不支持块元素display:inline-block
            -->
            <div>kaivon1</div>
            <div>kaivon2</div>
            <span>kaivon1</span>
            <span>kaivon2</span>
        </body>
    </html>
    

    普通浏览器中效果

    这里写图片描述

    IE7中效果

    这里写图片描述

    7、IE8以及IE8以前的浏览器都不支持opacity

    解决办法
    用filter

    代码演示

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                div{
                    width: 100px;
                    height: 100px;
                    background: red;
                    opacity: 0.5;
                    filter:alpha(opacity=50);
                }
            </style>
        </head>
        <body>
            <!--
                IE8以及IE8以前的浏览器都不支持opacity
                解决办法
                    用filter
            -->
            <div>kaivon</div>
        </body>
    </html>
    
  • 相关阅读:
    凯撒密文的破解编程实现
    微软ping命令的源代码
    从编程到入侵
    永远的后门
    永远的后门
    奇妙的Base64编码
    用端口截听实现隐藏嗅探与攻击(二)
    奇妙的Base64编码
    Liferea 1.1.2
    Equinox Desktop Environment 1.1
  • 原文地址:https://www.cnblogs.com/TCB-Java/p/6853955.html
Copyright © 2011-2022 走看看