0

これで、私のウェブサイトはほぼ完成しました。Firefox や IE 8 でも問題なく表示されます。しかし、Chromeはそれを台無しにします。

FFで見るとこんな感じ。 http://imageshack.us/a/img713/6414/firefoxtr.png

そして、ここChromeで： http://imageshack.us/a/img600/9174/chromedv.png

下の画像とまったく同じコードですが、Crome が最初の画像のサイズを変更する方法を確認してください。

HTMLコードは次のとおりです。

<table id="todo" class="subview_table web_coding_table">
<tr>
    <td>
        <img src="image/preview_small/todo.jpg" alt="ToDo-App" />
    </td>
    <td>
        <h2>ToDo Webapplikation</h2>
        <p>Einfache Terminplaner-App zum Erstellen,
Bearbeiten und Löschen von Terminen</p>
    </td>
    <td>
    <div class="white_triangle">&nbsp;</div>
    </td>
 </tr>
</table>



<div id="todo_content" class="invisible_content web_coding_content">
 <p>Die ToDo-Webapplikation entstand als Semesterarbeit zusammen mit meiner     Teamkollegin ---. Die Herausforderung hierbei war die komplexe, klassenbasierte Programmierung mittels JavaScript. Die App speichert Termine cookiebasiert ab und kann daher auch lokal vom Rechner aus verwendet werden.</p>
 <a href="http://www.hs-augsburg.de/~cr/todo_app/" target="_blank" title:"ToDo-App"><img src="image/preview_big/todo.jpg" alt="ToDo Screenshot"/></a>
 <a class="big_link" href="http://www.hs-augsburg.de/~cr/todo_app/" target="_blank" title:"ToDo-App">Zur Live-Demo</a>


<table id="resi" class="subview_table web_coding_table">
<tr>
    <td>
        <img src="image/preview_small/resi.jpg" alt="Resi bringt Bier" />
    </td>
    <td>
        <h2>Resi Bringt Bier</h2>
        <p>Getränke-Nachtlieferservice in München mit Shopsystem.</p>
    </td>
    <td>
    <div class="white_triangle">&nbsp;</div>
    </td>
 </tr>
</table>

<div id="resi_content" class="invisible_content web_coding_content">
 <p>HINWEIS!: Der Kunde dieses Projekts arbeitet selbst noch an der Website und den Inhalten weiter, daher entspricht das Erscheinungsbild möglicherweise nicht meiner eigentlichen Arbeit.</p><br />
 <p>Resi Bringt Bier ist eine Website für einen Nachtlieferanten in München. Sie wurde mit Wordpress umgesetzt und verwendet diverse Plugins sowie eine eigens kreierte Theme. Hinzu kommt die Verwendung eines eigenen JavaScript-Codes, sowie diverse Codeveränderungen in PHP.<p>
 <a href="http://www.resibringtbier.de" target="_blank" title:"Resi Bringt Bier"><img src="image/preview_big/resi.jpg" alt="Resi"/></a>
 <a class="big_link" href="http://www.resibringtbier.de" target="_blank" title:"Resi Bringt Bier">Zur Website</a>
</div>

クラス「Invisible_content」の DIV は表示されないことに注意してください。

ここにCSS：

table h2 {
font-size:1.5em;
color:#FFFFFF;
font-style: normal;
}

table p {
color:#FFFFFF;
}

.subview_table {
height:120px;
position:relative;
margin:20px 0px 0px 0px;
background-color:#961518;
}

.subview_table h2 {
margin-top:0px;
}

.subview_table img {
padding:10px;
margin:0px;
}

.subview_table td {
min-width:70px;
}

.white_triangle {
position:absolute;
top:60px;
right:20px;
height:0;
width:0;
border-color: #FFFFFF transparent transparent transparent;
border-style: solid;
border-width: 15px;
}

.invisible_content {
display:none;
padding: 20px;
background-color:#d8d5c6;
}

助けてくれてありがとう！

4

1 に答える 1

6

OP のタイトル: Google Chrome は CSS を非常に間違って解釈します...?

間違った仮定。コードが適切な基準に従っていない場合、ブラウザーは単純にユーザーの意図を推測せざるを得なくなります。つまり、Chrome ではなく、真の根本原因である無効で不正なコードがあります。

  • が無効な HTML<a href="http://www.resibringtbier.de" target="_blank" title:"Resi Bringt Bier">であることに注意してください。title:"Resi Bringt Bier"する必要がありますtitle="Resi Bringt Bier"。この同じ過ちを5、6回繰り返しました。

  • の終了タグを忘れている可能性もあります。（見ているOPのバージョンによって異なります。）</div><div id="todo_content"

  • 画像サイズに関する苦情について: あなたの HTML または CSS には、画像をレンダリングする必要があるサイズをブラウザーに伝えるものはまったくありません。また、実際のネイティブ サイズも確認できません。

  • divセルの中に aがありますがtd、これはあまり良い方法ではありません。

  • CSS テクニックを慎重に調べて評価してください。多くのサイジング仕様が欠けています。tablesそれらをそのままにしておくと、予測がつかない場合があります。HTML や CSSwidthでそれぞれの を指定します。td

http://jsfiddle.net/t2cFb/2/

W3C オンライン バリデーターで HTML を実行し、すべてのエラーを修正します。

http://validator.w3.org/

于 2013-03-30T14:57:49.707 に答える