哥要学前端!!饥人谷技术博客

浏览器兼容

2016-07-11  本文已影响651人  __Qiao

一、如何调试 IE 浏览器

1.png 2.png 3.png

高版本IE浏览器的开发者工具很不错，可以选择不同版本模式进行调试；ietester可以创建不同版本的浏览器，但感觉不是很好用；个人还是比较喜欢用虚拟机安装不同版本浏览器的方式，感觉更真实。

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

参考：
史上最全的CSS hack方式一览
Browserhacks

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

  1. 不同浏览器的默认标签的margin和padding不同
    解决办法：

     *{margin: 0; padding: 0;}

    备注：这是最常见的也是最易解决的一个浏览器兼容性问题。

  2. 块级元素设置float后，又有左右margin的情况下，IE6显示的margin比设置的大
    解决办法：在float的标签样式中加入display: inline;将其转化为行内元素
    备注：我们最常用的就是div+css布局了，而div就是一个典型的块级元素，横向布局时我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

  3. 设置较小高度的标签（一般小于10px），在IE6、IE7中高度超出自己设置的高度
    解决办法：给超出高度的标签设置overflow: hidden;或者设置行高line-height小于设置的高度
    备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

  4. 行内元素，设置display: block;后采用float布局，又有左右margin的情况，IE6显示的margin比设置的大
    解决办法：在display: block;后面加入display: inline; display: table;
    备注：行内元素，为了设置宽高，我们需要设置display: block;（除了input标签比较特殊）。在float布局并有横向的margin后，在IE6下，它就具有了块级元素float后的横向margin的bug。不过因为它本身就是行内元素，所以我们再加上display: inline;的话，它的高度就不可设了。这时候我们还需要在display: inline;后面加入display: table;

  5. 图片默认有间距：几个img标签放在一起时，有些浏览器会有默认的间距，加了margin:0; padding:0;也不起作用
    解决办法：使用float属性为img布局
    备注：因为img标签是行内标签，所以只要不超出容器宽度，img标签都会排在一行，但是部分浏览器的img标签之间会个间距。

  6. 标签设置min-height不兼容
    解决办法：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto!important; height:200px; overflow:visible;}
    备注：在B/S系统前端开发时，有很多情况下我们有这种需求。当内容小于一个值（如300px）时，容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时我们就会面临这个兼容性问题。

  7. 透明度的问题
    解决办法：

     selector{
     filter: alpha(opacity=50);/*for IE*/
     -moz-opacity: 0.5;/*for old versions of the Mozilla browsers*/
     -khtml-opacity: 0.5;  /* for old versions of Safari*/
     opacity: 0.5;
 }

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

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

CSS Reset是革命党，CSS Reset里最激进那一派提倡不管你小子有没有用，通通给我脱了那身衣服，凭什么你body出生就穿一圈margin，凭什么你姓h的比别人吃得胖，凭什么你ul戴一胳膊珠子。于是*{margin:0;}等等运动，全把人家拍扁了。看似是众生平等了，实则是浪费了资源又占不到便宜，有求于人家的时候还得贱贱地给加回去，实在需要人家的默认样式了怎么办？人家过都扔炉子里烧了，自己看着办吧。
Normalize.css是改良派。他们提倡，各个元素都有其存在的道理，简单粗暴地一视同仁是不好的。body那一圈确实挤压了页面的生存空间，那就改掉。士农工商，谁有谁的作用，给他们指定个规范，确保他们在任何浏览器里都干好自己的活儿。

知乎: Normalize.css 与传统的 CSS Reset 有哪些区别

让我们谈一谈 Normalize.css

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

4.png

操作

1. virtualbox 安装 xp 虚拟机

5.png

用Virtualbox虚拟机安装Windows XP/7、Win7系统详细图文教程

网上下载的很多XP系统都是默认的IE8浏览器，而且没法卸载，安装纯净版的XP系统就可以很方便的卸载IE8还原到IE6。
系统之家 GHOST XP SP3 纯净版 V2014.12

xp怎样把ie8变回ie6？

VirtualBox启动虚拟机报错0x80004005

虚拟机与主机共享粘贴板、拖放，还需安装增强工具包
如何为VirtualBox安装 Guest Additions/增强工具包/功能增强包/增强功能包

2. IE盒模型

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>盒模型</title>
    <style>
        .box{
          width: 100px;
          height: 100px;
          margin: 10px;
          padding: 20px;
          border: 10px solid #ccc;
          background: red;
        }
    </style>
</head>
<body>
  <div class="box"></div>
</body>
<html>
6.png

下面通过设置固定宽高，改变marging、padding、border来展示IE盒模型：

7.png 8.png 9.png 10.png

3. inline-block

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>inline-block</title>
 <style>
    .inline-block{
        display: inline-block;
        width: 100px;
        height: 100px;
        margin: 10px;
        padding: 20px;
        border: 10px solid #ccc;
        background: red;
    }
</style>
</head>
<body>
    <div class="inline-block"></div>
    <div class="inline-block"></div>
    <a class="inline-block" href=""></a>
    <a class="inline-block" href=""></a>
</body>
<html>
11.png 
但是IE8兼容性视图中，对块级元素设置`inline-block`不起作用，如图所示：
12.png 13.png 14.png

4. max-width

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>max-width</title>
<style>
    .block{
        display: block;
        max-width: 100px;
        max-height: 100px;
        margin: 10px;
        padding: 20px;
        border: 10px solid #ccc;
        background: red;
    }
    .inline-block{
        display: inline-block;
        max-width: 100px;
        max-height: 100px;
        margin: 10px;
        padding: 20px;
        border: 10px solid #ccc;
        background: red;
    }
</style>
</head>
<body>
    <div class="block">
    </div>
    <div class="inline-block">max</div>
    <a class="block" href="">max</a>
    <a class="inline-block" href="">max</a>
</body>
<html>
15.png 16.png 17.png

本文版权属吴天乔所有，转载务必注明出处。

上一篇下一篇

猜你喜欢

热点阅读