CSS 在 IE 中不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/595768/
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
CSS not working in IE?
提问by Zack The Human
Been working on this site for some time now, works perfectly on Mac and PC Firefox, as well as Safari. However, IE is making the site almost blank - any ideas on what is going on? Any workarounds?
已经在这个网站上工作了一段时间，在 Mac 和 PC Firefox 以及 Safari 上完美运行。但是，IE 使该网站几乎一片空白 - 对正在发生的事情有什么想法吗？任何解决方法？
Thank you in advance for your help!
预先感谢您的帮助！
http://www.alliedprintingsolutions.com
http://www.alliedprintingsolutions.com
http://www.alliedprintingsolutions.com/style.css(Stylesheet)
回答by Kristof Neirynck
回答by Peter Boughton
Add a DOCTYPE!
添加文档类型！
Either HTML5 or HTML4 Strict(notTransitional) are recommended for best cross-browser support.
建议使用 HTML5 或 HTML4 Strict（不是Transitional）以获得最佳的跨浏览器支持。
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
(As you can see, HTML5 is much simpler, and still usable even if you're not yet using HTML5 tags.)
（如您所见，HTML5 简单得多，即使您还没有使用 HTML5 标签也仍然可用。）
Note: The DOCTYPE must be very first thing in the file, before all other tags, and with no blank lines, tabs, nor spaces before it.
注意：DOCTYPE 必须是文件中的第一件事，在所有其他标签之前，并且之前没有空行、制表符或空格。
回答by Zack The Human
You may want to try adding a doctype.
您可能想尝试添加文档类型。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Edit: The doctype declaration should be the firstthing in the html file. It goes even beforethe <html> tag.
编辑： doctype 声明应该是html 文件中的第一件事。它甚至在<html> 标签之前。
回答by Paxenos
The Quick Solution: Remove "overflow: auto;" from #wrapperbig and #wrapper.
快速解决方案：删除“溢出：自动；” 来自#wrapperbig 和#wrapper。
This will get the content to be displayed.
这将获得要显示的内容。
However, be sure to look at the other answers. They have good points.
但是，请务必查看其他答案。他们有很好的观点。
回答by NAAFI
I too faced the same problem and found a solution after some research.
我也遇到了同样的问题，经过一番研究找到了解决方案。
- Do not code CSS on the HTML file
- Make a separate CSfile and link to it using
<link rel="stylesheet" href="css/style.css"> - And always add
<!DOCTYPE>tag to every HTML page //*This is the main solution
- 不要在 HTML 文件上编码 CSS
- 制作一个单独的 CSfile 并使用链接到它
<link rel="stylesheet" href="css/style.css"> - 并且始终
<!DOCTYPE>为每个 HTML 页面添加标签 //*这是主要的解决方案
回答by Pavan Mehta
Sometimes even after adding
有时甚至在添加后
<!DOCTYPE html>
Css is not loaded.
未加载 CSS。
It is because of white spaces before
这是因为之前的空格
<!DOCTYPE html>
Make sure it is not present.
确保它不存在。
Else in IE, page will terribly shown
否则在 IE 中，页面会显示得很糟糕
回答by nottmb
Not just white space before:
不只是之前的空白：
<!DOCTYPE html>
but also remove spaces before the curly braces in your style sheet (CSS file). Example of simple style sheet (imagine it at the left margin in your text editor):
但也要删除样式表（CSS 文件）中花括号前的空格。简单样式表的示例（想象它位于文本编辑器的左边距）：
h1{
font-family:Arial;
color:purple;
}
回答by LicenseQ
There are too much woo-doo stuff happening with absolute positioning of content_left and content_right. You will be fine by removing “position: absolute” and replace it with “float:left” in both content's (set wrapper width to 100%).
content_left 和 content_right 的绝对定位发生了太多的 woo-doo 事情。您可以通过删除“位置：绝对”并将其替换为两个内容中的“浮动：左”（将包装宽度设置为100％）。
回答by LicenseQ
Thank you for all your suggestions, everyone. The majority of the content is showing up (relatively as it should be) on IE now, other than the footer which is slicing up my page in a gross fashion (haha). I see what youre saying, Nelson LaQuet, about the header images, I will have to try and play around with them, I'm still new to CSS and figuring out to having them all properly placed with an image map was headache enough as is. As for the Doctype, I added it as you told me and it seemed to muck up some content even on Firefox, so I know I must have some more errors to go through. When I remove it, things looked normal again. The "woowoo's" with the absolute positioning were pretty much necessary, as the positioning method used was the ONLY way I could find to work with the background images and header images in tact, with the column divs in the correct place. At least I made some positive progress it, but I guess I have more work ahead of me :/ Just wish it was a bit easier to correct as it looks just fine in Firefox. Oh well, thanks again for all your help, guys!
谢谢大家的建议。现在大部分内容都在 IE 上显示（相对应该的），除了页脚以粗暴的方式切碎我的页面（哈哈）。我明白你在说什么，Nelson LaQuet，关于标题图像，我将不得不尝试使用它们，我仍然是 CSS 的新手，并且弄清楚将它们全部正确放置在图像映射中已经够头疼了. 至于 Doctype，我按照你的说法添加了它，即使在 Firefox 上它似乎也搞砸了一些内容，所以我知道我必须要经历更多的错误。当我删除它时，事情看起来又正常了。绝对定位的“woowoo”是非常必要的，因为使用的定位方法是我能找到的唯一方法来处理背景图像和标题图像，将列 div 放在正确的位置。至少我取得了一些积极的进展，但我想我还有更多的工作要做：/只是希望它更容易纠正，因为它在 Firefox 中看起来很好。哦，好的，再次感谢您的帮助，伙计们！
Shannon
香农
回答by Donald Harvey
Had a quick look at the code in firebug. You seem to have a z-index of -1 on the content div (#wrapperbig), which browsers should ignore for non-absolute/relative content - this may be an odd implementation in IE.
快速浏览了 firebug 中的代码。您似乎在内容 div (#wrapperbig) 上的 z-index 为 -1，对于非绝对/相对内容，浏览器应该忽略它——这在 IE 中可能是一个奇怪的实现。
Also, as mentioned before, add a doctype - IE will render the site in 'quirks mode' if there is no doctype.
此外，如前所述，添加 doctype - 如果没有 doctype，IE 将以“怪癖模式”呈现站点。
