私はウェブサイトを「継承」しており、とりわけそれを維持しています。ただし、最近、ほとんどの主要なブラウザー(FF、IE 7,8、9、Chrome)でサイトが適切に動作する一方で、Operaでは完全に間違ってレンダリングされていることに気付きました。
調査の結果、Operaのsが表示されないことが問題であることがわかりました。<table>
特に、計算されたスタイルには次のものが含まれていますdisplay: none;
。これは奇妙なことに私を驚かせましdisplay: table;
た。デフォルトでもあるこの要素のスタイルに明示的に含めており、リンクされたスタイルシートではdisplay: none;
、テーブルが表示されない原因となる可能性のある場所がどこにも見当たりません。
他のすべての言及されたブラウザは、スタイルシートで明示されていなくてもdisplay: table;
、要素の計算されたスタイルを持っていました。<table>
この例を以下に示します。Ubuntu11.10および12.0464ビットでテスト済み。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;
}