css - Internet Explorer 不呈现自定义列表项中的前导文本

标签 css internet-explorer iis xhtml html-lists

这是 How to create a custom list style with a dash 的后续行动.

具体来说,我的问题涉及 Internet Explorer 9(请参阅本问题末尾的示例 XHTML 文档。我的示例文档包含内联 CSS。)

当我将示例 XHTML 文档作为本地文件查看时,我在 IE9 中看到了预期的结果:

Here is a list:
- One
- Two
- Three

但是,当我通过 IIS 查看同一个 XHTML 文档时,我在 IE9 中看到一些不同的东西:

Here is a list:
  One
  Two
  Three

也就是说,IE9 不会呈现破折号,该破折号应该出现在每个列表项的开头。

(请注意,Firefox 31确实在本地以及通过 IIS 查看文件时呈现破折号。)

此问题是否与 IIS 返回的 HTTP header 有关?以下是我的 IIS 实例返回的关键 header :

200 OK
Date: Tue, 09 Sep 2014 18:41:34 GMT
Server: Microsoft-IIS/7.5
Content-Length: 706
Content-Type: text/html
Title: Custom List Item Test
X-Powered-By: ASP.NET

示例 XHTML 文档:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Custom List Item Test</title>

    <!-- https://stackoverflow.com/a/24279072/1497596 -->
    <style type="text/css">
      ul
      {
        list-style-type: none;
      }

      ul > li:before
      {
        content: "-";
        position: absolute;
        margin-left: -1.1em;
      }
    </style>
  </head>
  <body>
    <h1>Here is a list:</h1>
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </body>
</html>

最佳答案

@Lister 先生,您的评论为我指明了解决方案。

我发现我的 IE9 Compatibility View设置如下:

[x] Include updated website lists from Microsoft
[x] Display intranet sites in Compatibility View
[ ] Display all websites in Compatibility View

我感兴趣的网页由 IIS 在属于我的 Intranet 成员的服务器上提供服务。由于选中了第二个复选框,IE9 使用兼容性 View 设置呈现页面。清除第二个复选框后,介绍每个列表项的破折号变得可见。

使用上面显示的设置,当我从我的本地磁盘查看文档时,IE9 最初确实显示列表项破折号。但是,当我选中第三个复选框时,破折号从列表中消失了。

因此,这解释了我在本地查看文档与通过 IIS 查看文档时观察到的不同结果。

关于css - Internet Explorer 不呈现自定义列表项中的前导文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25751958/

相关文章:

html - 如何删除具有两列的行之间的空间

html - 如何在 componentDidMount 中将 div 滚动到底部(使用 react.js)?

html - 向左浮动的行为类似于向右浮动

javascript - location.assign 在 IE 中不起作用

html - IE 11 <main> 未被识别为 block 元素

c# - 防止从其他站点链接 css

Azure Web 应用程序错误? Web.config 变得重复

html - 并排分区不起作用

html - 带有 IE 的 iframe 和背景图片

iis - WiX 未正确配置 IIS 站点