Question

我的网站在除Internet Explorer之外的所有浏览器中都很棒。我目前正在Internet Explorer 8上进行测试。我设法使用条件样式表（ie.css）来解决一些问题，但是有些问题我根本无法弄清楚。我对任何涉及CSS或jQuery的建议持开放态度。

以下是网站的链接：Test Page

这些是我目前遇到的问题：

按钮在悬停时消失
当您将鼠标悬停在“资源”按钮上时，会添加一个下拉菜单（使用WordPress Dropdown Menu Widget Plugin）。当您将鼠标悬停在其中一个子菜单锚点上时，父按钮将完全消失。当子按钮悬停时，如何强制父按钮保持可见？
主要容器不会在页面中心
主要内容区域（#content_area）不以页面为中心。我有一个设置的宽度和边距：0也定义了自动，但内容区域仍然没有在页面上居中。我已经尝试了很多不同的方法来解决这个问题，但仍然没有运气。

我还需要将底部区域（#bottom_area）居中，但我想它只会使用与主要内容区域相同的策略。

关于如何让它们居中的任何想法？
页面右侧的神秘边缘
在页面的右边缘是大约10px的边距，我无法弄清楚它来自哪里。我该如何删除？

Answer 1

主要问题是你的html无效。首先将<link ...> - <DOCTYPE ... />之前的标记移动到<head>。我认为有些问题已经解决了。例如。如果IE无法分析doctype，则有时它不起作用color: inherit;。

=== UPDATE ===

在cahnges之后，html应该是这样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Lybeck Murphy, LLP - Lawyers</title>
<link type='text/css' rel='stylesheet' href='http://lybeckmurphy.com/test/wp-content/themes/mtt/custom_post_type.css' />
...

观看您的“页面来源”，在第一次更改后看起来像：

<link type='text/css' rel='stylesheet' href='http://lybeckmurphy.com/test/wp-content/themes/mtt/custom_post_type.css' /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Lybeck Murphy, LLP - Lawyers</title>
...

Answer 2

我注意到你没有指定doctype。这可能无法解决您的所有问题，但通过简单地包含适当的doctype，可以减轻IE中一些最令人沮丧的CSS问题。欢迎来到quirks mode的世界。

Answer 3

在＆lt; head＆gt;中复制以下标记标记为第一个标记：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

它应该可以解决您的问题。

为什么我使用IE8遇到这些问题？

3 个答案: