IE5下li元素hover时自动换行失效问题求助

嘿，这个IE5的兼容问题确实有点棘手，毕竟它是非常古老的浏览器了😅。咱们先理清楚问题根源，再给出可行的修复方案：

问题根源 #

IE5并不支持非<a>元素的:hover伪类，而且对white-space属性的处理也和现代浏览器有差异——这就是你的代码在IE5里失效的核心原因。

修复方案 #

下面提供两种可行的方法，你可以根据需求选择：

方法1：使用IE专有CSS表达式（无需额外文件）

我们可以利用IE5支持的CSS表达式（expression）来模拟鼠标悬停的样式切换，把这段代码加到你的CSS里即可：

/* 仅针对IE5的兼容代码 */
* html #breakText li {
  /* 初始状态保持nowrap和hidden */
  white-space: nowrap;
  overflow: hidden;
  /* 用表达式监听鼠标事件切换样式 */
  white-space: expression(
    this.onmouseover = function() {
      this.style.whiteSpace = 'normal';
      this.style.overflow = 'visible';
    },
    this.onmouseout = function() {
      this.style.whiteSpace = 'nowrap';
      this.style.overflow = 'hidden';
    },
    'nowrap' /* 默认值 */
  );
}

方法2：原生JavaScript实现（更稳定）

如果不想用CSS表达式，也可以直接用JS来监听鼠标事件，这种方式兼容性更可控：

首先补全你的基础CSS（保留现代浏览器的hover样式）：

#breakText{ 
  border: 1px solid #000; 
  width: 200px; 
  padding: 0px !important; 
} 
#breakText li{ 
  margin: 0px !important; 
  padding: 8px; 
  margin: 48px auto 0; 
  white-space: nowrap; 
  overflow: hidden; 
  display: block; 
} 
/* 现代浏览器的hover样式 */
#breakText li:hover{ 
  white-space: normal; 
  overflow: visible; 
}

然后在页面底部添加JS代码，专门针对IE5处理：

// 精准识别IE5（IE6及以上支持XMLHttpRequest，IE5不支持）
if(document.all && !window.XMLHttpRequest){
  var listItems = document.getElementById('breakText').getElementsByTagName('li');
  for(var i = 0; i < listItems.length; i++){
    listItems[i].onmouseover = function(){
      this.style.whiteSpace = 'normal';
      this.style.overflow = 'visible';
    };
    listItems[i].onmouseout = function(){
      this.style.whiteSpace = 'nowrap';
      this.style.overflow = 'hidden';
    };
  }
}

补充说明 #

• * html是IE5的专有选择器，用来限定CSS代码只在IE5中生效，不会影响其他浏览器。
• JS里的判断条件可以精准定位IE5，避免干扰其他版本的浏览器。

内容的提问来源于stack exchange，提问作者acchu