您的位置：首页 > 其它

level-13

2016-03-15 20:25 176 查看

如何调试IE浏览器

1.打开IE浏览器，F12打开开发者模式。（针对IE7及以上）
2.针对IE6浏览器。使用虚拟机或者用ietester

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

由于不同厂商的浏览器，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 而`CSS hack`是利用浏览器漏洞来让不同浏览器显示效果一致，我们把针对不同的浏览器/不同版本写相应的`CSS code`的过程，叫做`CSS hack`；

CSS hack

的基本四种方法：

ie条件注释法

只在IE下生效
<!–[if IE]>
这段文字只在IE浏览器显示
<![endif]–>
只在IE6下生效
<!–[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]–>
只在IE6以上版本生效
<!–[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]–>
只在IE8上不生效
<!–[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]–>
非IE浏览器生效
<!–[if !IE]>
这段文字只在非IE浏览器显示
<![endif]–>

属性前缀

_和-只对ie6有效；
*对ie6,7有效；
\9对ie11以下所有ie有效；
\0对ie8,9,10有效；
\9\0只对ie9,10有效；
\0\9只对ie8,9有效；

选择器前缀法：

* 前缀只对IE6有效；
*+ 前缀只对IE7有效；

列举几种浏览器兼容问题

1.ie6,7下块级元素float浮动后的双边距bug。
2.ie6、7不支持display:inline-block;
3.ie6中块级元素不支持：hover属性

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

并不是覆盖越多的浏览器越好，要考虑付出和收益比。考虑的维度可以有

浏览器使用用户的比例情况及（各个浏览器的市场占用率）

项目关键人使用浏览器习惯

客户使用浏览器习惯

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

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

reset.css是统一将所有元素的默认样式格式化。比较暴力，不管你以前是什么样子，统统变成一个样子，元素的默认样式都会去掉。
nomalize.css相当于改良派，提倡是保留有用的元素默认样式，需要什么元素变成什么样子的时候再对其进行调整。并对不同浏览器的兼容进行了优化，在可维护性和易用性上表现较好，因此推荐使用nomalize.css。

操作：
下的虚拟机装系统装错了。里面浏览器不是ie6的。
就用的IE那个开发者模式测试的。
测试代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
border:50px solid red;
width:100px;
height:100px;
padding:50px;
margin:50px;
}
.box3,.box2{
display: inline-block;
}
.box4{
max-width:300px;
height:100px;
background:red;
margin:0px auto;
}
</style>
</head>
<body>
<div class="box1">盒模型</div>
<div class="box2">你好</div>
<div class="box3">世界</div>
<div class="box4">max-width:300px</div>

</body>
</html>

IE7下的情况：

IE8下的情况：

IE5下的情况

找不到IE6的浏览器测试了下IE5的是感觉大不一样。。。。
百度了一下
是因为一般情况下IE6下面的和模型就是怪异模式？

怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器。
在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
当不对doctype进行定义时，会触发怪异模式。
另外，可以通过触发hasLayout，使IE6进入正常的解析模式当中，如设置css属性zoom:1

另外inline-block不支持IE6、7
max-width:只支持IE7以上的

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享