Question

我已经在wordpress中构建了一个网站，主页在IE中搞砸了，但在FF，Chrome和Safari中工作正常。

我在5个小时内召开电话会议，我需要修复它，如果有人可以提供帮助，我将非常感激。

第一个菜单项周围的红色框
菜单向右推，缺少项目
标签都被压扁了
侧边栏显示在标签下方而不是侧面

所有其他页面在菜单/页眉布局方面都显得很好。

Answer 1

在标题中尝试此操作

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

它的作用是修复IE的许多CSS错误和限制。我在我的所有网站上使用它，它通常可以节省数天的工作，追逐IE的许多渲染问题。

Home Page of IE7-js

如果这样可以解决您的问题并且您仍然想捐赠给Dean Edwards，那个剧本背后的男人：http://dean.edwards.name/donate/

更新：只是查看了您的源代码并发现了这种顽皮：

<script type="text/javascript" src="http://www.fullygreen.com/wp-content/themes/fully-green/js/jquery-1.2.1.pack.js"></script>
<script type="text/javascript" src="http://www.fullygreen.com/wp-content/themes/fully-green/js/jquery-easing.1.2.pack.js"></script>
<script type="text/javascript" src="http://www.fullygreen.com/wp-content/themes/fully-green/js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="http://www.fullygreen.com/wp-content/themes/fully-green/js/coda-slider.1.1.1.js"></script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

这将导致IE进入hasLayout模式（又称非标准模式）。将该文档类型放到FIRST行（之前没有空格或其他标记），否则您将看到各种疯狂的错误。

Answer 2

要修复导航菜单的位置，请将clear:left添加到#wrapper1

#wrapper1 {
position:relative;
text-align:left;
padding-top:20px;
padding-left:5px;
clear:left;
}

将所有内部div的顶部值更改为0

#mnufghome {
position:absolute;
top: 0;
left: 0px;
}

我只看了你的来源，DOCTYPE声明必须是HTML文件中的第一件事。你有一些JavaScript包括。没有DOCTYPE或没有无效的DOCTYPE会将IE引入怪癖模式并且它会变得疯狂。

你在函数introshowtabs（）

中也有一个javascript错误

在侧边栏中，您的图像突然出现圆角，因为您的图像宽度为250px，但包含div（#sidebarads）的宽度仅为240px。 IE将扩展容器以适应它所包含的内容。

由于IE6处于怪癖模式，因此没有任何圆角位于灰色中心。

这是第一个菜单项周围的红色边框的问题（在style.css的第546行附近）：

a.current.fghome { width:130px; background: url(images/menu/sel_home.jpg) left top no-repeat; border: 3px red solid; }

删除border: 3px red solid;

Answer 3

以下是4个问题的一些答案：

问题1：样式表包含一个3px boder in style.css，就像Emily指出的那样，html代码包含一个错误，双引号在onclick之后是错误的一面：＆gt;“

<a class="fghome" href="/home" title="fg home"alt="fg home" onclick="menuselected(1)>"</a>

问题2：最好通过在标题DIV之外移动wrapper1 DIV来稍微更改HTML结构。

<div class="span-24" id="wrapper">
  <div class="span-24" id="header">
    <div id="headerimage"><img alt="" src="http://www.fullygreen.com/wp-content/themes/fully-green/images/icons/hp_icon.jpg"/></div>
    <div id="logo"><img title="fully green" src="http://www.fullygreen.com/wp-content/themes/fully-green/images/hp_logo.png"/></div>
  </div>
  <div id="wrapper1">
    <div id="mnufghome"> <a onclick="menuselected(1)" alt="fg home" title="fg home" href="/home" class="fghome" /></div>
    <div id="mnufgstory"> <a alt="fg story" title="fg story" href="/story" class="fgstory" /></div>
    <div id="mnufgprojects"> <a alt="fg projects" title="fg projects" href="/projects" class="fgprojects" /></div>
    <div id="mnufgnews"> <a alt="fg news" title="fg news" href="/news" class="fgnews" /></div>
    <div id="mnufgpeople"> <a alt="fg people" title="fg people" href="/people" class="fgpeople" /></div>
    <div id="mnufgabout"> <a alt="fg contact" title="fg contact" href="/contact" class="fgabout" /></div>
  </div>
</div>

style.css中的一些样式更改：

#header {
background: url(images/header.jpg) no-repeat top center;
height: 110px;
}

#mnufgprojects {
float: left;
width: 170px;
}

#mnufgstory {
float: left;
width: 170px;
}

Similarly for the other navigation buttons...

问题3。

似乎在其他答案的帮助下几乎已经解决了，比如JS的位置。

问题4。

无法通过您的问题和查看您的网站发现问题。

希望这个和其他答案能帮助您按时在IE中修复问题。祝你好运！

Answer 4

因此，您无需执行任何特定于IE8的操作，请在页面中抛出该兼容性元标记：

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

如果需要，您应该可以使用EmulateIE6。

在IE中打破的菜单上的CSS样式

4 个答案: