div内没有显示表格中的表格

我有'继承'一个网站，我是其中的一部分来维护它。然而，最近我注意到，虽然该网站在大多数主流浏览器（FF; IE 7,8,9; Chrome）中的行为合理，但在Opera中却完全错误。div内没有显示表格中的表格

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

所有其他浏览器上述的计算样式为<table>元素有display: 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; 
}

来源

2012-08-16 Ger4ish

什么与'content：“”;'decleration？这是一个css属性，只能与'：before'和'：after'伪选择符结合使用。尝试删除这些，看看会发生什么。 – 2012-08-16 15:45:01

我认为这是一个Opera bug，在Opera网站上报告:) – 2012-08-16 16:02:34

我已经尝试过自己，如果你删除content: ""从两种风格的声明，一切正常。

来源

2012-08-16 15:45:54

谢谢，这确实解决了它。该属性（我认为）应该是清除样式表的一部分，它如何到达那里是一个谜。 – Ger4ish 2012-08-16 16:08:36

-1

看来歌剧院已经决定不遵循CSS Level 2 which states that content only applies to :before and :after pseudo-selectors

卸下content:"";从两个风格declerations修复了这个在Opera的规范。

P.S. IE7服从标准，而歌剧dosn't，我们生活在疯狂的时代

来源

2012-08-16 15:50:42

这是因为Opera比这更先进，[它支持CSS3，它声明它适用于* all * elements]（http://www.w3.org/TR/css3-content/#content）。 – Kornel 2012-08-16 15:59:41

div内没有显示表格中的表格

回答

相关问题