Html 为什么这个页面在 IE、Firefox 和 Chrome 中看起来不同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2800363/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why does this page look different between IE, Firefox & Chrome
提问by ripper234
Take a look at this html page.
看看这个html 页面。
In Firefox it looks just like I want it to look, in IE it looks "a bit weird", and in Chrome it's all twisted.
在 Firefox 中，它看起来就像我想要的样子，在 IE 中它看起来“有点奇怪”，而在 Chrome 中则完全扭曲。
What non-standard HTML I am using that makes it looks so different between browsers? Specifically, how can I fix the Chrome & IE versions to look more like Firefox?
我使用的什么非标准 HTML 使它在浏览器之间看起来如此不同？具体来说，如何修复 Chrome 和 IE 版本以使其看起来更像 Firefox？
Note that Chrome only goes haywire if all or almost all columns have the yellow stickies. If one or two columns are empty, then Chrome displays the page just like Firefox.
请注意，只有当所有或几乎所有列都带有黄色便笺时，Chrome 才会出问题。如果一两列是空的，那么 Chrome 会像 Firefox 一样显示页面。
Edit - here is the fixed page.
编辑 - 这里是固定页面。
回答by Chetan Sastry
The page doesn't have a DOCTYPE. It is important to have one to tell the browsers that your page is standards compliant. Start from there and ensure your page passes validation for your chosen DOCTYPE.
该页面没有 DOCTYPE。让浏览器告诉浏览器您的页面符合标准是很重要的。从那里开始并确保您的页面通过您选择的 DOCTYPE 的验证。
UPDATE:Good job on fixing the validation! Your problem now is that the table element follows two floated divs without any clearing. You must clear the floated elements so that the following elements are laid out correctly below them.
更新：在修复验证方面做得很好！您现在的问题是 table 元素跟随两个浮动的 div 而没有任何清除。您必须清除浮动元素，以便将以下元素正确布置在它们下方。
Try the following. Google "clearfix" for a more elegant solution.
请尝试以下操作。谷歌“clearfix”以获得更优雅的解决方案。
<div style="float:left">....
<div style="float:right">....
<br style="clear:both"/>
<table ....
回答by Douglas
One of the first things I'd have to suggest is making sure that your code is valid if you want cross-browser friendly.
如果您想要跨浏览器友好，我必须建议的第一件事是确保您的代码有效。
The posted code comes up with 33 errors.
发布的代码出现了 33 个错误。
FF isn't quite as picky as some other browsers can be, and gives a lot of leeway in terms of valid code.
FF 不像其他一些浏览器那样挑剔，并且在有效代码方面提供了很大的回旋余地。
Try validating and fixing the problems with validity, then check it again; it might look at least a bit better.
尝试验证并修复有效性问题，然后再次检查；它可能看起来至少好一点。
回答by filip-fku
Try validating your CSS and HTML if possible. That usually helps remove the biggest of glitches.
如果可能，请尝试验证您的 CSS 和 HTML。这通常有助于消除最大的故障。
validator.w3.org
验证器.w3.org
回答by Joe Phillips
Float your calendar table to the left
将日历表向左浮动
