任务13-浏览器兼容

2016-08-10  本文已影响50人  饥人谷_任磊

1.如何调试IE浏览器?

IE9开发者工具 虚拟机IE6浏览器

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

这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

<!--[if IE]> 
<p>这段代码只会在IE浏览器中生效</p>
<![endif]-->

只在IE6中生效：

<!--[if IE 6]>
 <p>这段代码只会在IE6浏览器中生效</p>
<![endif]-->

只在有IE6以上版本生效：

<!--[if gte IE 6]>
<p>这段代码只在IE6及以上版本IE浏览器生效</p>
<![endif]-->

关于条件注释法的各种操作符可以参考课件条件注释，不需要记住所有的内容，了解就行。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>for ie6</title>
        <style type="text/css">
            div p{
                _color: red;
            }/* 属性前缀法 */
            *html div h1{
                color: red;
            }/* 选择器注释法 */
        </style>
    </head>
    <body>
        <div>
            <h1>hello world</h1>
            <!--[if IE 6]>
            <p>You are using Internet Explorer 6.</p>
            <![endif]-->
            <!-- 条件注释法 -->
        </div>
    </body>
</html>

先看这段代码在非IE6浏览器中的显示：

非IE6浏览器

从上图可以看出，针对IE6设置的Hack在非IE6浏览器中没有生效。
再看IE6浏览器中的显示：

IE6

很明显，在IE6中Hack生效了。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>for ie7</title>
        <style type="text/css">
            div p{
                *color: red;
            }/* 属性前缀法 */
            *+html div h1{
                color: red;
            }/* 选择器注释法 */
        </style>
    </head>
    <body>
        <div>
            <h1>hello world</h1>
            <!--[if IE 7]>
            <p>You are using Internet Explorer 7.</p>
            <![endif]-->
            <!-- 条件注释法 -->
        </div>
    </body>
</html>

看看这段代码在IE6和IE7中的显示对比：

对比

很明显，这段代码中的Hack只在IE7中生效。

更多的CSS hack方式可以参考以下资料：
史上最全的CSS hack方式一览
BROWSERHACKS
需要注意的是，CSS hack不是万能，用的越多，bug越多，所以一个良好的具有兼容性的页面代码应该只有少量的hack。在写页面代码的时候如果有兼容性要求，就尽量使用兼容性好的CSS属性，在源头上就消除这些问题。

3.列举几种浏览器兼容问题。

ie7不支持opacity
经过查询可以使用filter:Alpha(opacity=40)来设置IE的元素透明度，如下图： 使用filter兼容IE inline-block的兼容性
可以看到IE8以下的IE浏览器是部分支持该属性的，即块级元素display：inline-block是不支持的，行内元素display：inline-block是支持的。 Paste_Image.png

添加如下代码解决兼容问题

*display:inline;

*zoom:1;
ie7兼容inline-block

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

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

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

IE盒模型 标准盒子模型

8.virtualbox 安装 xp 虚拟机

IE6安装
安装的过程还是比较麻烦的，所以贴一个链接，方便以后再安装：VirtualBox虚拟机：[3]安装Ghost XP。

9.在 ie 6, 7, 8中展示 盒模型、inline-block、max-width的区别

标准模式下
怪异模式下 怪异模式下 怪异模式下

从上面的图片可以看出IE盒模型和标准盒模型的区别。

上一篇下一篇

猜你喜欢

热点阅读