ie的兼容问题以及处理

最新推荐文章于 2024-04-02 10:54:01 发布

一路向北@L

最新推荐文章于 2024-04-02 10:54:01 发布

阅读量234

点赞数

分类专栏：详解文章标签： web 前端

本文链接：https://blog.csdn.net/qq_40944918/article/details/96369882

版权

详解专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1:常见的兼容问题

兼容：通过代码实现各浏览器表现一致性

1.ie8下图片边框问题

<a><img src="" alt=""></a>

解决方法

img{
    border:0;//去掉ie8下图片边框
    or vertical-align:middle; 取消下间隙
}

2.图片下间隙问题

解决方法:
		1)图片转换为块元素 display:block;
		2)给父元素加font-size:o;line-height:0;(局限)
	 	3)垂直对齐  vertical-align:middle;

3.文本框和提交按钮对不齐现象

解决方法：
	1、不用普通按钮  用a元素模拟按钮 js提交
	2、给按钮外边套一个div

4.ie6下小高度问题

解决方法
div{
    font-size:0px;
    line:height:0px;
}

2:css hack

hack: 针对不同浏览器写不同的结构或css代码就叫hack

结构hack :用于ie浏览器不同版本

6种条件: 大于小于等于大于等于小于等于非 >=ie6 =ie6

<!--[ if IE 6 ]>  开始

<p>只在ie6显示</p>
 
<![endif]-->  结束

CSS Hack实际上是指特殊的代码，这段代码只在某些浏览器中可以识别，而在其他浏览器不能识别，通过这种方式，来为一些浏览器设置特殊的代码使用：在使用条件Hack时，需在HTML中添加link样式,在样式中添加脚本，写法如下：
<!--[if IE 8]>
<link rel='stylesheet' type='text/css' herf='css/sty-ie8.css'>
<![endif] -->
写法如下：语法：
<!--[if <keywords>? IE <version>?]><![endif]-->
HTML代码块<![endif]-->keywords取值|

if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本选择方式说明是否指定是否IE或IE某个版本。
关键字：空大于选择大于指定版本的IE版本。
关键字：gt（greater than）大于或等于：选择大于或等于指定版本的IE版本。
关键字：gte（greater than or equal）小于选择小于指定版本的IE版本。
关键字：lt（less than）小于或等于选择小于或等于指定版本的IE版本。
关键字：lte（less than or equal）
非指定版本选择除指定版本外的所有IE版本。关键字：!

ie10以上已经将条件hack废除

属性hack

_display:inline;  针对ie6及其以下浏览器

*display:inline; 针对ie7及其以下浏览器

display:inline\0;  ie8,ie9两个浏览器

.test {
    
    w200
    h200
    bgc:red;//谷歌 火狐显示红色  
    _bgc:yellow; ie6及其以下显示黄色
    *bgc:green;ie7及其以下显示绿色
    bgc:orange\0;ie8,ie9 显示橘色
    
}
<div class="test"></div>

选择符hack

*html .box {
    bgc:red;
}//ie6添加此样式
*+ html .box {
    bgc:red;
}
//只有ie7才识别

3:经典常见布局

自适应: 盒子宽度随着屏幕宽度发生变化百分比

1:两列自适应布局

在这里插入图片描述

要求:左侧盒子固定,右侧盒子100% 左侧盒子加左浮动属性 ===>浮动元素会覆盖标准盒子

2: 三列自适应布局

左右两侧固定宽度,中间盒子自适应

技术点: 负外边距 margin-left:-px + 相对定位 (left-,right-)+ 浮动并排

在这里插入图片描述

设置最外侧盒子的内边距吧实现的

<!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>
    <style>
    * {
        padding: 0;
        margin: 0;
    }
    .container {
        /* min-height: 最小高度  if 内容的高度<300px  取300px  */

        min-height: 300px;
        /* 4:内边距 ---> 把内容挤到中间来 */
        padding: 0px 220px 0px 200px;
    }
    .left {
        width: 200px;
        height: 400px;
        background-color: red;
        float: left;
        /* 2:向左走100% */
        margin-left: -100%;

    /* 5:利用相对定位想左移动自身的宽度 */
    position: relative;
    left:-200px;


    }
    .center {
        width: 100%;
        height: 400px;
        background-color: deeppink;
        float: left;
    }
    .right {
        width: 220px;
        height: 400px;
        background-color: palegreen;
        float: left;
        /* 3: */
        margin-left: -220px;
        /* 6:利用相对定位想右移动自身的宽度 */
    position: relative;
    right: -220px;
    
    }
    
    </style>
</head>
<body>
    <div class="container">
          <!-- 100%宽度 自适应  保证左右两侧的盒子同时和他并排右侧 -->
          <div class="center">中心盒子</div>

        <!-- 固定宽度 -->
        <div class="left">左侧盒子</div>
      
        <div class="right">右侧盒子</div>
    </div>
</body>
</html>

双飞翼布局

始于淘宝UED UED

特点: 给中心盒子在套一个盒子 ,这个盒子设置左右两侧的外边距 ,目的是把内容放到中心盒子身上展示

<!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>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
    .c {
        min-height: 400px;

    }
    .center {
        width: 100%;
        height: 400px;
        background-color: red;
        float: left;
    }
    .left {
        width: 200px;
        height: 400px;
        background-color: skyblue;
        float: left;
        margin-left: -100%;
    }
    .right {
        width: 220px;
        height: 400px;
        background-color: silver;
        float: left;
        margin-left: -220px;
    }
    .inner {
        margin: 0px 220px 0px 200px;
    }
    </style>
</head>
<body>
    
    <div class="c">


        <div class="center">

            <div class="inner">
                    中间盒子
            </div>
            
         
        
        </div>
        <div class="left">左侧盒子</div>
        <div class="right">右侧盒子</div>
    </div>
</body>
</html>