饥人谷-任务十三

2016-09-03  本文已影响0人  饥人谷_罗伟恩

一、如何调试 IE 浏览器

二、什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 ie6、ie7的 hack 方式？

.container{ 
     _color: red;/*IE6识别*/ 
     *color: red;/*IE6,IE7识别*/ 
     color: red\9;/*IE6-IE10识别*/ 
     color: red\0;/*IE8-IE10识别*/ 
     color: red\9\0;/*IE9,IE10识别*/ 
}```
常用的就是* 和 _还有-
（2）选择器前缀法
（即选择器hack）选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

html{}/只对IE6生效/
+html{}/只对IE7生效/

（3）IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
（即HTML条件注释hack）：（注：IE10+已经不再支持条件注释）这类hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
 - 只在IE下生效
    ```
<!--[if IE]>
 这段文字只在IE浏览器显示 
<![endif]>

 - 只在IE6以上版本生效
       ```
<!--[if gte IE 6]> 
这段文字只在IE6以上（包括）版本IE浏览器显示
<![endif]-->

 - 只在IE8上不生效
       ```
<!--[if ! IE 8]> 
这段文字在非IE8浏览器显示
<![endif]-->

- 在 CSS 中 ie6、ie7的 hack 方式
（1）IE6
   - 属性前缀法
    ```
    .box{ 
        _color: red;/*for IE6*/
       }```
   - 选择器前缀法
    ```
    *body{}
  /*for IE6*/
       }```
   - 条件注释法
    ```
    <!--[if IE 6]>
    <body class="ie6">
    <![endif]-->

（2）IE7

<!--[if IE 7]>
<body class="ie7">
<![endif]-->```
  
（3）IE6~IE7
- 属性前缀法

.box{
*color: red;
/*for IE6~7*/

}```

  @media screen\9{...}
}```
- 条件注释法

}```
CSS hack现在用的越来越少，能不用尽量不用，可以用最少的hack去实现多浏览器兼容的页面。所以不需要花很大精力去记，有这个概念，遇到了知道怎么查怎么解决就行。例如星号是做ie67的hack，下划线是ie6的hack。

三、列举几种 浏览器兼容问题

.test{display:inline-block; /其他样式.../}
.test{display:inline;}```
第二种方法（推荐），利用IE6/7的Css专有前缀来触发layout（感觉怎么有点像js的setTimeout）:

.test{display:inline-block; *zoom: 1; *display: inline;}```

- **IE6双倍浮动行距**
在IE6下，当一个div在另一个div向左浮动，并且带有margin-left的样式，那么这时它的左边距是样式定义的双倍，同理如果是向右浮动和margin-right，效果是一样的。不过在此后浮动的div的边距反倒是没问题的，只是第一个有此问题。
这时，解决的方法是：简单给该div加个```_display:inline;```样式即可

- li里元素都浮动li在ie67下方会产生4px间隙问题
解决方法：添加```*vertical-align:top```
- **CSS透明问题** 
IE8及以下版本不支持```opacity```属性，可使用```filter:alpha(opacity=50)```替代
解决方法：
```-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”```

- 标签设置min-height不兼容解决办法
如果我们要设置一个标签的最小高度200px，需要进行的设置为：

{
min-height:200px;
height:auto!important;
height:200px;
overflow:visible;
}```

四、针对兼容、多浏览器覆盖有什么看法？渐进增强和优雅降级是什么意思？

五、reset.css和normalize.css分别是做什么的？为什么推荐使用 nomalize.css?

六、IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用

值 描述
content-box 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框
border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit 规定应从父元素继承 box-sizing 属性的值。

box-sizing: border-box;计算方法为width/height=content+padding+border，表示指定的宽度和高度包含边框、内边距和内容区域。 即IE盒模型算法。

七、操作题

1、安装VB

VB安装

2、

<!doctype html>
<html>
<head>    
<meta charset="UTF-8">    
<title>IE8</title>    
<style>       
 .box{ 
width: 100px;            
height: 100px;            
margin: 10px;           
 padding: 10px;            
background: red;           
border: 2px solid #000000;       
 }    
</style>
</head>
<body>
<div class="box">    
have !doctype</div>
<div class="box">    
have !doctype</div>
</body>
</html>
IE6盒模型有!doctype声明标准盒模型 IE7盒模型有!doctype声明标准盒模型 IE8盒模型有!doctype声明标准盒模型

这是没有!doctype声明的：

<html>
<head>    
<meta charset="UTF-8">    
<title>IE8</title>    
<style>       
 .box{ 
width: 100px;            
height: 100px;            
margin: 10px;           
 padding: 10px;            
background: red;           
border: 2px solid #000000;       
 }    
</style>
</head>
<body>
<div class="box">    
without !doctype</div>
<div class="box">    
without !doctype</div>
</body>
</html>
IE6盒模型没!doctype声明IE盒模型 IE7盒模型没!doctype声明IE盒模型 IE8盒模型没!doctype声明IE盒模型 
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>IE8</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: red;
            border: 1px solid #000000;
            display: inline-block;
        }
    </style>
</head>

<body>
<div class="box">
  inline-block
</div>
<div class="box">
  inline-block
</div>
  <div class="box">
  inline-block
</div>
</body>
</html>
IE6下不兼容 IE7下不兼容 IE8下兼容 
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>IE8</title>
    <style>
        .box{
            max-width: 100px;
            height: 100px;
            border: 1px solid #000000;
        }
    </style>
</head>

<body>
<div class="box">
    svsdvvvvvvv
    vvfdsvsdfv
    sdvfsdfv
    sdfvsfvs
    fvsdsd</div>

</body>

</html>
IE6下的max-width不兼容 IE7下的max-width兼容 IE8下的max-width兼容
上一篇 下一篇

猜你喜欢

热点阅读