Internet Explorer 11 忽略首次加载时的 list-style:none-JavaScript中文网-JavaScript教程资源分享门户

Internet Explorer 11 (IE11) 是一款老旧的浏览器，但目前仍有很多用户在使用。在开发过程中，我们可能会遇到 IE11 忽略 list-style:none 的问题。

问题详解

当我们在 CSS 样式中使用 list-style:none 去除列表样式时，大部分现代浏览器都能正确地渲染样式。然而，在 IE11 中，如果页面第一次加载时该列表项处于可见状态，则列表样式将被保留。只有在刷新或重新加载页面后，样式才会正常应用。

这是因为 IE11 在渲染页面时存在一个 bug：它无法正确地处理列表项渲染顺序，导致在第一次渲染时未能成功应用 list-style:none 样式。

解决方案

针对这个问题，我们可以采取以下两种解决方案：

方案一：使用 JavaScript 进行修复

我们可以使用 JavaScript 来检查并修复列表样式。具体来说，我们需要在文档加载完毕后，通过遍历每个列表项，手动将其样式设置为 list-style:none。下面是一个示例代码片段：

window.onload = function() {
  var listItems = document.getElementsByTagName('li');
  
  for (var i = 0; i < listItems.length; i++) {
    listItems[i].style.listStyle = 'none';
  }
}

方案二：使用 hack 进行修复

另一个可行的解决方案是使用 CSS hack。我们可以在样式表中添加以下代码：

-- -------------------- ---- -------
-- -
  ----------- ----- -- ---------------- --
-

------ ------ --- ------------------- -------- ------------------- ----- - -- -- ---- ------ --
  -- -
    ----------- ------- -- ----------------- --
  -
-

这段 CSS 代码首先定义了 list-style:none 样式，以应对所有现代浏览器。接着，我们使用媒体查询来针对只有 IE11 才拥有的 -ms-high-contrast 属性，强制应用 list-style:inside 样式，以覆盖默认样式。

指导意义

虽然 IE11 已经相对较老，但仍有很多用户在使用。作为前端开发者，我们需要确保我们的网站或应用程序在各种浏览器和设备上都能够正确地运行。遇到类似的浏览器兼容性问题时，我们需要尝试不同的解决方案，以确保代码的可移植性和稳定性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/30487