Question

所以我几乎已经完成了我的网站，它看起来很好用Firefox甚至IE 8！但Chrome只是搞砸了。

以下是FF的外观：

在Chrome上：

了解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;
}

提前感谢您的帮助！

Answer 1

OP的标题：Google Chrome解释CSS非常错误？

错误的假设。如果您的代码不符合正确的标准，浏览器将被迫简单地猜测您的意图。换句话说，你有无效和格式错误的代码，这是真正的根本原因，而不是Chrome。

请注意，您有<a href="http://www.resibringtbier.de" target="_blank" title:"Resi Bringt Bier">，其中title:"Resi Bringt Bier"是无效的HTML。应该是title="Resi Bringt Bier"。你重复了这个错误大约五六次。
您可能也忘记了</div>上的结束标记<div id="todo_content"。（取决于您正在查看的OP版本。）
关于您的图片尺寸投诉：我在您的HTML或CSS中看不到任何内容告诉浏览器应该呈现图像的大小，也不能看到实际的原始大小。
div单元格内有td，这不是一个很好的做法。
仔细检查和评估您的CSS技术......它缺少许多尺寸规格。当你让他们想出自己时，tables可能有点难以预料。在HTML和/或CSS中指定每个width的{{1}}。

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

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

http://validator.w3.org/

谷歌浏览器解释CSS非常错误......？

1 个答案: