飞绿说说几个有意思的IEbug

标签： javascript IEbug | 发表时间：2011-12-30 20:39 | 作者：飞绿
出处：http://www.36ria.com

最近工作中遇到的一些坑爹bug，下面列举三个，都来之IE…… :arrow:

1、IE7自动换行bug

代码如下：

  1. <style>
  2.         ul {
  3.             width: 100%;
  4.             height: auto;
  5.         }
  6.         ul li {
  7.             clear: both;
  8.             float: left;
  9.             margin: 12px;
  10.             border: #cdcdcd 1px solid;
  11.             padding: 6px;
  12.             width: auto;
  13.             background-color: #eaeaea;
  14.             list-style: none;
  15.         }   
  16.     </style>
  17.  
  18.     <ul>
  19.         <li>
  20.             类目地图模板1>一级类目>二级类目/购书券
  21.             <a href="#">取消选择</a>
  22.         </li>
  23.         <li>
  24.             类目地图模板1>一级类目>二级类目/购书券>三级类目/网上购书券>四级类目/教育培训卡>五级类目/高中培训卡
  25.             <a href="#">取消选择</a>
  26.         </li>
  27.         <li>
  28.             类目地图模板1>二级类目/吃喝玩乐折扣券>三级类目/购书券
  29.             <a href="#">取消选择</a>
  30.         </li>
  31.     </ul>

需求上希望li路径的外边框宽度自适应，正常的显示如图：

但在ie7下会出现这样的换行现象，如下图：

在测试中还发现该换行现象跟屏幕显示器分辨率相关，上面ie7的效果是在分辨率1280*800下看到的，如果分辨率更低换行的现象就更易发现。

解决的方法是在li里再套一层div，给div设置宽度自适应

  1. <style>
  2.         ul {
  3.             width: 100%;
  4.             height: auto;
  5.         }
  6.         li {
  7.             list-style: none;
  8.         }
  9.         ul div {
  10.             clear: both;
  11.             float: left;
  12.             margin: 12px;
  13.             border: #cdcdcd 1px solid;
  14.             padding: 6px;
  15.             width: auto;
  16.             background-color: #eaeaea;
  17.         }   
  18.     </style>
  19.  
  20.     <ul>
  21.         <li>
  22.         <div>
  23.                 类目地图模板1>一级类目>二级类目/购书券
  24.                 <a data-id="1-50019418" class="delete-cat" href="#">取消选择</a>
  25.             </div>
  26.         </li>
  27.         <li>
  28.             <div>
  29.                 类目地图模板1>一级类目>二级类目/购书券>三级类目/网上购书券>四级类目/教育培训卡>五级类目/高中培训卡
  30.                 <a data-id="1-50019418" class="delete-cat" href="#">取消选择</a>
  31.             </div>
  32.         </li>
  33.         <li>
  34.             <div>
  35.                 类目地图模板1>二级类目/吃喝玩乐折扣券>三级类目/购书券
  36.                 <a data-id="1-50019418" class="delete-cat" href="#">取消选择</a>
  37.             </div>
  38.         </li>
  39.     </ul>

2、IE8 overflow和max-height引起的bug

现象：在IE8下，a容器设置max-height, overflow: auto或overflow: srcoll。会使得a容器把max-height当做height来渲染。

  1. <style>
  2.         .a {
  3.             width: 800px;
  4.             max-height: 200px;
  5.             overflow: scroll;
  6.             /*overflow-x: auto;*/
  7.             background: #0f0;
  8.         }
  9.         p {
  10.             width: 900px;
  11.         }
  12.     </style>
  13.     <div class="a">
  14.         <p>A容器设置了max-height，A容器设置了overflow: auto或srcoll，A容器会把max-height当做height来渲染。</p>
  15.     </div>

解决办法是去掉a容器的overflow设置，再给a容器套一个容器b，给b设置overflow。代码如下：

  1. <style>
  2.         .a {
  3.             width: 800px;
  4.             max-height: 200px;
  5.             background: #0f0;
  6.         }
  7.         .b {
  8.             width: 800px;
  9.             overflow: auto;
  10.         }
  11.         p {
  12.             width: 900px;
  13.         }
  14.     </style>
  15.     <div class="b">
  16.         <div class="a">
  17.             <p>解决办法是去掉a容器的overflow设置，再给a容器外面套一个容器b，给b容器设置overflow。</p>
  18.         </div>
  19.     </div>

关于IE8 overflow的相关问题可以看看这篇 《IE8 overflow and expanding box bugs》

3、IE9 overflow和:hover引起的bug

这是一个神奇的现象，IE9下，容器a设置overflow：auto，a容器中的内容导致a容器的滚动条出现，这种情况下若给a容器设置伪类：hover。那么在鼠标移动到hover元素上，a容器高度会变高。代码如下：

  1. .a {
  2.             margin: 20px;
  3.             border: 2px solid #cdcdcd;
  4.             width: 800px;
  5.             overflow: auto;
  6.         }
  7.         p {
  8.             width: 900px;
  9.         }
  10.         p:hover {
  11.             color: #f60;
  12.         }
  13.     </style>
  14.     <div class="a">
  15.         <p>容器a设置overflow：auto,a中的内容导致a的滚动条出现，这种情况下若给a容器中的元素设置伪类:hover。那么在鼠标移动到hover元素上后a容器的高度会变高。</p>
  16.     </div>

解决办法是给a容器设置伪类:hover{height: 100%}或者给a容器设置overflow-y/x:scroll.代码如下：

  1. <style>
  2.         .a:hover {
  3.             height: 100%;
  4.         }
  5.     </style>

相关 [iebug] 推荐：

飞绿说说几个有意思的IEbug

- - ria之家--RIA三部曲：jquery、ext、flex
最近工作中遇到的一些坑爹bug，下面列举三个，都来之IE…….             类目地图模板1>一级类目>二级类目/购书券.             取消选择.             类目地图模板1>一级类目>二级类目/购书券>三级类目/网上购书券>四级类目/教育培训卡>五级类目/高中培训卡.