IE浏览器的经典错误

最新推荐文章于 2022-05-20 15:00:00 发布

tianjiliu_123

最新推荐文章于 2022-05-20 15:00:00 发布

阅读量457

点赞数 1

分类专栏： IT的经典实用技巧问题解答 HTML CSS 文章标签： ie 浏览器 border float internet web开发

本文链接：https://blog.csdn.net/tianjiliu_123/article/details/7793616

版权

HTML CSS 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

IT的经典

1 篇文章 0 订阅

订阅专栏

实用技巧

1 篇文章 0 订阅

订阅专栏

1.发送错误报告
【故障现象】
在使用IE浏览网页的过程中，出现“Microsoft Internet Explorer遇到问题需要关闭……”
的信息提示。此时，如果单击“发送错误报告”按钮，则会创建错误报告，单击“关闭”按钮之后
会引起当前IE窗口关闭；如果单击“不发送”按钮，则会关闭所有IE窗口。
【故障解决】
针对不同情况，可分别用以下方法关闭IE发送错误报告功能:
①对IE 5.x用户，执行“控制面板→添加或删除程序”，在列表中选择
“Internet Explorer Error Reporting”选项，然后单击“更改/删除”按钮，将其从系统中删除。
②对Windows 9x/Me/NT/2000下的IE 6.0用户，则可打开“注册表编辑器”，
找[HKEY_LOCAL_MACHINE＼Software ＼Microsoft＼Internet Explorer＼Main]，在右侧窗格
创建名为IEWatsonEnabled的DWORD双字节值，并将其赋值为0。
③对Windows XP的IE 6.0用户，执行“控制面板→系统”，切换到“高级”选项卡，单击“错误报告”
按钮，选中“禁用错误报告”选项，并选中“但在发生严重错误时通知我”，最后单击“确定”按钮。
==================================================================================
2.IE发生内部错误，窗口被关闭
【故障现象】
在使用IE浏览一些网页时，出现错误提示对话框:“该程序执行了非法操作，即将关闭……”，
单击“确定”按钮后又弹出一个对话框，提示“发生内部错误……”。单击“确定”按钮后，
所有打开的IE窗口都被关闭。
【故障解决】
①关闭过多的IE窗口。如果在运行需占大量内存的程序，建议IE窗口打开数不要超过5个。
②降低IE安全级别。执行“工具→Internet选项”菜单，选择“安全”选项卡，单击“默认级别”
按钮，拖动滑块降低默认的安全级别。
③将IE升级到最新版本。IE 6.0下载地址:IE6.0 。IE 6.0 SP1下载地址: windows Update 。
可使用以IE为核心的浏览器，如MyIE2。它占用系统资源相对要少，而且当浏览器发生故障关闭时，
下次启动它，会有“是否打开上次发生错误时的页面”的提示，尽可能地帮你挽回损失.
==================================================================================
3.出现运行错误
【故障现象】
用IE浏览网页时弹出“出现运行错误，是否纠正错误”对话框，单击“否”按钮后，
可以继续上网浏览。
【故障解决】
①启动IE，执行“工具→Internet选项”菜单，选择“高级”选项卡，选中“禁止脚本调试”复选框，
最后单击“确定”按钮即可。
②将IE浏览器升级到最新版本。
==================================================================================

4.IE窗口始终最小化的问题
【故障现象】
每次打开的新窗口都是最小化窗口，即便单击“最大化”按钮后，下次启动IE后新窗口仍旧是最小化的。
【故障解决】
①打开“注册表编辑器”，
找到[HKEY_ CURRENT_USER＼Software＼Microsoft＼Internet Explorer＼Desktop＼Old WorkAreas]，
然后选中窗口右侧的“OldWorkAreaRects”，将其删除。
②同样在“注册表编辑器”
中找到[HKEY_CURRENT_USER＼Software ＼Microsoft＼Internet Explorer＼Main]，
选择窗口右侧的“Window_Placement”，将其删除。
③退出“注册表编辑器”，重启电脑，然后打开IE，将其窗口最大化，并单击“往下还原”按钮将
窗口还原，接着再次单击“最大化”按钮，最后关闭IE窗口。以后重新打开IE时，窗口就正常了！
==================================================================================

以上是经常出现的，比较有用的。

==================================================================================

9个最常见IE的Bug及其fix

Internet Explorer – Web程序员的毒药。在IE上开发时间中有超过60%的时间是花在和IE的bug进行搏斗，让你的开发生产率严重下降。下面是一个教程，告诉你9个IE上最常见的BUG以及如何解决它们。

1. 居中布局

创建一个CSS定义把一个元素放到中间的位置，可能是每一个Web开发人员都会做的事情。最简单的做法是为你的元素增加一个margin: auto; ，然而 IE 6.0 会出现很多奇怪的行为。让我们来看一个例子。

 
   01#container{ 
 
   02    border:solid 1px #000; 
 
   03    background:#777; 
 
   04    width:400px; 
 
   05    height:160px; 
 
   06    margin:30px 0 0  30px; 
 
   07} 
 
   08  
 
   09#element{ 
 
   10    background:#95CFEF; 
 
   11    border:solid 1px #36F; 
 
   12    width:300px; 
 
   13    height:100px; 
 
   14    margin:30px auto;
 
   15  
 
   16}

下面是我们所期望的输出：

但IE却给我们这样的输出：

这应该是IE 6对margin的 auto 并没有正确的设置。但幸运的是，这是很容易被修正的。

解决方法

最简单的方法是在父元件中使用 text-align: center 属性，而在元件中使用 text-align: left 。

 
   01#container{ 
 
   02    border:solid 1px #000; 
 
   03    background:#777; 
 
   04    width:400px; 
 
   05    height:160px; 
 
   06    margin:30px 0 0  30px; 
 
   07    text-align:center; 
 
   08} 
 
   09  
 
   10#element{ 
 
   11    background:#95CFEF; 
 
   12    border:solid 1px #36F; 
 
   13    width:300px; 
 
   14    height:100px; 
 
   15    margin:30px 0;
 
   16        text-align:left; 
 
   17  
 
   18}

2. 楼梯式的效果

几乎所有的Web开发者都会使用list来创建导航条。下面是你可能会用到的代码：

 
   1<ul>
 
   2    <li><ahref="#"></a></li>
 
   3    <li><ahref="#"></a></li>
 
   4    <li><ahref="#"></a></li>
 
   5</ul>

 
   01ul { 
 
   02    list-style:none; 
 
   03} 
 
   04  
 
   05ul li a { 
 
   06    display:block; 
 
   07    width:130px; 
 
   08    height:30px; 
 
   09    text-align:center; 
 
   10    color:#fff; 
 
   11    float:left; 
 
   12    background:#95CFEF; 
 
   13    border:solid 1px #36F; 
 
   14    margin:30px 5px;
 
   15}

一个符合标准的浏览器会是下面这样：

但IE却是这样的：

Tutorial Image

下面是两个解决方法

解决方法一

设置li元件的float属性。

 
   1ul li { 
 
   2    float:left; 
 
   3}

解决方法二

设置 display: inline 属性。

 
   1ul li { 
 
   2    display:inline
 
   3}

3. float元件的两倍空白

请看下面的代码：

 
   1#element{ 
 
   2    background:#95CFEF; 
 
   3    width:300px; 
 
   4    height:100px; 
 
   5    float:left; 
 
   6    margin:30px 0 0  30px; 
 
   7    border:solid 1px #36F; 
 
   8}

期望的结果是：

IE的结果是：

解决方案

和上面那个BUG的解决方案一样，设置 display: inline 属性可以解决问题。

 
   1#element{ 
 
   2    background:#95CFEF; 
 
   3    width:300px; 
 
   4    height:100px; 
 
   5    float:left; 
 
   6    margin:30px 0 0  30px; 
 
   7    border:solid 1px #36F; 
 
   8    display:inline; 
 
   9}

4. 无法设置微型高度

我们发现在IE中使用 height: XXpx 这样的属性无法设置比较小的高度。下面是个例子（注意高度是2px）：

 
   1#element{ 
 
   2    background:#95CFEF; 
 
   3    border:solid 1px #36F; 
 
   4    width:300px; 
 
   5    height:2px; 
 
   6    margin:30px 0;
 
   7}

期望结果： 2px的元件加1px的边框.

IE的结果：

解决方案一

这个BUG的产生原因很简单，IE不允许元件的高度小于字体的高度，所以，下面的fix是设置上字体大小。

 
   1#element{ 
 
   2    background:#95CFEF; 
 
   3    border:solid 1px #36F; 
 
   4    width:300px; 
 
   5    height:2px; 
 
   6    margin:30px 0;
 
   7        font-size:0; 
 
   8}

解决方案二

但是最佳的解决方法是使用 overflow: hidden 。

 
   1#element{ 
 
   2    background:#95CFEF; 
 
   3    border:solid 1px #36F; 
 
   4    width:300px; 
 
   5    height:2px; 
 
   6    margin:30px 0;
 
   7        overflow:hidden
 
   8}

5. 跨出边界

这个BUG是很难看的。当父元件中使用了 overflow 的 auto 属性，并且在其里放入相关元件。你会看来里面的元件会跨出来。下面是一个示例：

`1`	`<divid="element"><divid="anotherelement"></div></div>`

 
   01#element{ 
 
   02    background:#95CFEF; 
 
   03    border:solid 1px #36F; 
 
   04    width:300px; 
 
   05    height:150px; 
 
   06    margin:30px 0;
 
   07    overflow:auto; 
 
   08} 
 
   09  
 
   10#anotherelement{ 
 
   11    background:#555; 
 
   12    width:150px; 
 
   13    height:175px; 
 
   14    position:relative; 
 
   15    margin:30px; 
 
   16}

期望的结果：

IE的结果：

解决方法

设置 position: relative;属性

 
   1#element{ 
 
   2    background:#95CFEF; 
 
   3    border:solid 1px #36F; 
 
   4    width:300px; 
 
   5    height:150px; 
 
   6    margin:30px 0;
 
   7    overflow:auto; 
 
   8        position:relative; 
 
   9}

6. Fixing the Broken Box Model

Internet Explorer曲解了“盒子模子”可能是最不可原谅的事情了。IE 6 这个半标准的浏览器回避了这个事情，但这个问题还是会因为IE运行在“怪异模式”下出现。

两个Div元件。一个是有fix的，一个是没有的。而他们不同的高和宽加上padding的总合却是不一样的。下图的上方是被修正的，下方则没有。

解决方法

我相信这个事情即不需要解释也不需要演示，这应该是大多数人都明白的。下面是一个很相当怪异的解决方案

 
   1#element{ 
 
   2    width:400px; 
 
   3        height:150px; 
 
   4    padding:50px; 
 
   5}

上面的定义也就是说：

 
   1#element { 
 
   2    width:400px; 
 
   3    height:150px; 
 
   4   /height:250px; 
 
   5   /width:500px
 
   6}

是的，你要原来的长和宽上加上了padding。但这个fix只会作用于IE了的“怪异模式”，所以你不需要担心在IE6的正常模式下会有问题。

7. 设置min-height和min-width

IE忽略了min-height。

解决方法一

这个fix由 Dustin Diaz提供。其利用了!important 下面是代码片段：

 
   1#element { 
 
   2  min-height:150px;
 
   3  height:auto!important; 
 
   4  height:150px;
 
   5}

解决方法二

 
   1#element { 
 
   2    min-height:150px; 
 
   3    height:150px; 
 
   4} 
 
   5  
 
   6html>body #element { 
 
   7    height:auto; 
 
   8}

8. Float 布局错误行为 Misbehaving

使用无table的布局最重要的就是使用CSS的float元件。在很多情况下，IE6处理起来好像在摸索阶段，有些时候，你会发现很多奇怪的行为。比如在其中有一些文本的时候。

来看一下下面这个示例：

 
   1<divid="container">
 
   2    <divid="element">http://net.tutsplus.com/</div>
 
   3    <divid="anotherelement"></div>
 
   4</div>

 
   01#element, #anotherelement{ 
 
   02    background:#95CFEF; 
 
   03    border:solid 1px #36F; 
 
   04    width:100px; 
 
   05    height:150px; 
 
   06    margin:30px; 
 
   07    padding:10px; 
 
   08    float:left; 
 
   09} 
 
   10  
 
   11#container{ 
 
   12    background:#C2DFEF; 
 
   13    border:solid 1px #36F; 
 
   14    width:365px; 
 
   15    margin:30px; 
 
   16    padding:5px; 
 
   17    overflow:auto; 
 
   18}

期望结果：

IE的结果：

你可以看到其中的不同了

解决方法

要解决这个问题没有什么好的方法。只有一个方法，那就是使用 overflow: hidden 。

 
   1#element{ 
 
   2    background:#C2DFEF; 
 
   3    border:solid 1px #36F; 
 
   4    width:365px; 
 
   5    margin:30px; 
 
   6    padding:5px; 
 
   7    overflow:hidden; 
 
   8}

9. 在list项目门的空行

先看下面的例子

 
   1<ul>
 
   2 <li><ahref="#">Link 1</a></li>
 
   3 <li><ahref="#">Link 2</a></li>
 
   4 <li><ahref="#">Link 3</a></li>
 
   5</ul>

 
   01ul { 
 
   02    margin:0;
 
   03    padding:0;
 
   04    list-style:none;
 
   05} 
 
   06  
 
   07li a { 
 
   08    background:#95CFEF; 
 
   09    display:block; 
 
   10}

期望结果：

IE的结果：

Fortunately, there are a plethora of fixes you could try.

解决方法一

定义height来解决

 
   1li a { 
 
   2    background:#95CFEF; 
 
   3    display:block; 
 
   4        height:200px; 
 
   5}

解决方法二

 
   1li a { 
 
   2    background:#95CFEF; 
 
   3    float:left; 
 
   4        clear:left; 
 
   5}

解决方法三

为 li 加上display: inline。

 
   1li { 
 
   2    display:inline; 
 
   3}

结论

调界面是一件很难的事，调一个CSS的HTML界面是一件更难的事，在IE下调一个CSS的HTML界面是难上加难的事。

[来源]

http://blog.csdn.net/xcntime/article/details/5783051

tianjiliu_123

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录