Question

我'继承'了一个网站，我还有其他一些东西要维护它。然而，最近我注意到虽然该站点在大多数主流浏览器（FF; IE 7,8,9; Chrome）中表现得相当合理，但在Opera中却完全错误。

经过一番调查后，我发现问题是Opera中的<table>没有显示，特别是它们的计算样式包含：display: none;。这让我觉得很奇怪，因为我已明确包含在此元素display: table;的样式中，这也是默认值，并且在链接的样式表中，我看不到任何可能导致表格的display: none;不显示。

所有其他提到的浏览器在display: table;元素的计算样式中都有<table>，即使它没有在样式表中显式化。

下面提供了一个例子。在Ubuntu 11.10和12.04 64位下测试。已经确认在Windows下效果是一样的（FF，Chrome和IE显示表; Opera没有）。

使用和不使用HTTP服务器（http://localhost/test1.html和file:///var/www/test1.html）进行测试，两种浏览器都没有区别。

我很怀疑问题是在我身边，但我没有想法，任何帮助都会受到赞赏。抱歉，如果这是一个微不足道的问题或对我（或原始开发人员）的HTML或CSS的误解，我主要是一个PHP程序员。

我遇到的行为的最短可能的例子是：

test1.html

<html>
 <head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="test.css" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 </head>
 <body>
  <div class="menuItem">
   <table class="menuItem"><tr bgcolor="black"><td>ASD</td></tr>
   </table>
  </div>
 </body>
</html>

<小时/> test.css

.menuItem {
    content:"";
    border: 2px green;
    width: inherit;
    height: 50px;
    background-color: green;
}
table.menuItem {
    content:"";
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    height: 50px;
    text-align: center;
    display: table;
}

Answer 1

我自己尝试过，如果从两个样式声明中删除content: ""，一切正常。

Answer 2

Opera似乎决定不遵守CSS Level 2 which states that content only applies to :before and :after pseudo-selectors

的规范

从两种样式中删除content:"";修复了Opera中的内容。

P.S。 IE7服从标准，而歌剧没有，我们生活在疯狂的时代

div里面的表没有显示在Opera中

2 个答案: