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。

  • Note that you have <a href="http://www.resibringtbier.de" target="_blank" title:"Resi Bringt Bier">, where title:"Resi Bringt Bier" is invalid HTML. Should be title="Resi Bringt Bier". You've repeated this same mistake about five or six times.

  • You may have also forgotten the closing tag, </div> on your <div id="todo_content". (depends on which version of the OP you're looking at.)

  • Regarding your image size complaint: I'm seeing absolutely nothing in your HTML or CSS that tells the browser what size the image should be rendered, nor can we see the actual native size.

  • You have a div inside a td cell, which is not a very good practice.

  • 仔细检查和评估您的 CSS 技术……它缺少许多尺寸规格。tables当您让他们自己弄清楚时，可能会有些不可预测。在 HTML 和/或 CSS 中指定width每个。td

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

通过 W3C 在线验证器运行 HTML 并修复所有错误。

http://validator.w3.org/

于 2013-03-30T14:57:49.707 回答