Html IE对齐黑客

我是html/css新手，不知道如何破解IE。 问题是，在Chrome和FF中，菜单栏工作正常，但在IE中查看时，菜单栏乱七八糟。以及下拉子项未正确对齐。它应该放在

关于我们

菜单下面

请在IE中查看此内容

HTML:

功能覆盖（me）{
me2=me；
如果（我=='about'）{
$（'id_About'）.attr（'src'，'images/hover aboutus.jpg'）；}其他{$（'id_About'）.attr（'src'，'images/aboutus.jpg'）；}
如果（me=='partners'）{
$（'id_Partners'）.attr（'src'，'images/hover Partners.jpg'）；}其他{$（'id_Partners'）.attr（'src'，'images/Partners.jpg'）；}
如果（me==‘产品’）{
$（'id_Products'）.attr（'src'，'images/hover Products.jpg'）；}其他{$（'id_Products'）.attr（'src'，'images/Products.jpg'）；}
如果（me=='contactus'）{
$（'id_Contactus'）.attr（'src'，'images/hover Contactus.jpg'）；}其他{$（'id_Contactus'）.attr（'src'，'images/Contactus.jpg'）；}
}
$（文档）.ready（函数（）{
me2='about'；
$（'id_About'）.attr（'src'，'images/hover aboutus.jpg'）；
});

CSS:

*{
字体系列：verdana；
颜色：#514f4d；
}
html{overflow-y:scroll；}
img{边界：0；}
身体{
保证金：0；
填充：0；
文本对齐：居中；
}
.居中{
宽度：830px；
边界：0px；
保证金：0自动；
}
div{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.blue{边框：1px实心#00b1ef；}
.集装箱{
边界塌陷：塌陷；
位置：相对位置；
最小高度：90%；
高度：自动！重要；
身高：90%；
保证金：0；
宽度：100%；
}
#左面板，#右面板{
边界塌陷：塌陷；
显示：内联块；
宽度：30em；
身高：100%；
边际：0px；
最小宽度：100px；
背景：白色；
溢出：隐藏；
}
.标题{
保证金：0自动；
宽度：100%；
高度：自动；
边界塌陷：塌陷；
}
.b、.back更多：悬停{
颜色：#00b1ef；
字体：verdana；
}
.footer、.push{
宽度：100%；
高度：40px；
明确：两者皆有；
保证金：0自动0；
}
p、 版权所有{
字体大小：粗体；
文本对齐：居中；
线高：11px；
}
p{color:#514f4d；}
.a{
文本对齐：左对齐；
字体系列：verdana；
字号：11pt；
文字装饰：无；
颜色：#000000；
} 
#cssmenu{
列表样式：无；
边界：无；
}
#cssmenu ul{
列表样式：无；
边距：继承：
}
.盒子{
边框：1px实心#中交；
宽度：272px；
高度：290px；
垫底：0.5em；
溢出：隐藏；
-moz盒阴影3px 5px 4px rgba（235,235,235,1）；
-网络工具包盒阴影：3p5p4pRGBA（235,235,235,1）；
盒影：3p5p4pRGBA（235,235,235,1）；
/*对于IE 8*/
-ms过滤器：“progid:DXImageTransform.Microsoft.Shadow（强度=2，方向=10，颜色='#0606'）”；
/*对于IE 5.5-7*/
过滤器：progid:DXImageTransform.Microsoft.Shadow（强度=2，方向=10，颜色='#0606'）；
}
.x{线高度：1.5em；}
.酒吧{
背景：url（'images/heading top.jpg'）repeat-x；
高度：20px；
位置：相对位置；
z指数：1；
边缘顶部：95px；
}
#导航栏{
保证金：0；
填充：0；
}
#李国宝{
列表样式：无；
浮动：左；
}
#纳瓦巴利阿{
显示：块；
背景色：#03beff；
文字装饰：无；
字体大小：0.62em；
文本对齐：居中；
}
#纳瓦尔{
显示：无；
宽度：5.3em；/**帮助Opera解决问题的宽度**/
}
/**悬停状态**/
#navbar li：悬停ul{
显示：块；
位置：绝对位置；
页边顶部：-2px；
填充：0；
z-索引：99999；}
#导航栏李：悬停李{
浮动：无；
}
#导航栏李：悬停李a{
/**背景色：#2177c0**/
/**边框底部：1px实心#fff**/
颜色：#fff；}
#导航栏李a：悬停{
背景色：#2177c0；}

您可以使用以下方法创建IE浏览器指定的css：

仅IE：

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->

仅限IE 7：

<!--[if IE 7]>
    <link href="IE-7-SPECIFIC.css" rel="stylesheet" type="text/css">
<![endif]-->

---

有关详细信息，另一种方法是使用Modernizer库为不兼容的属性设置其他css类

---

在HTML中进行以下更改：

<table cellspacing="0" cellpadding="0" style="width:100%; border-spacing:0; margin:0 auto;">
    <tbody><tr>
        **<td width="22%" valign="top" align="left">**
            <a href="aboutus1.php" target="content"><img align="left" src="images/cti-logo.png" alt="logo"></a>
        </td>
        **<td width="88%" id="cssmenu" style="vertical-align: bottom; position: relative;">**
            **<ul style="margin:0px; float: right" id="navbar">**
                <li>  ....

****
****
**
**
。。。。

上述更改将与ie7一起在所有浏览器中正常工作。同时删除所有内联样式并将其保留在样式表中

---

查看此url以获取有关css黑客的信息：

您使用position:absolute作为下拉列表。尝试使用位置：相对于父项

和

#navbar{float:left/right}

---

对于导航布局

哪个版本的IE？在IE10中工作良好IE10中有一个小问题，菜单应该向右对齐。版本7和版本10是问题所在。当下拉菜单显示时，导航菜单下方的图像向下移动，因为我将位置：绝对更改为位置：相对

<table cellspacing="0" cellpadding="0" style="width:100%; border-spacing:0; margin:0 auto;">
    <tbody><tr>
        **<td width="22%" valign="top" align="left">**
            <a href="aboutus1.php" target="content"><img align="left" src="images/cti-logo.png" alt="logo"></a>
        </td>
        **<td width="88%" id="cssmenu" style="vertical-align: bottom; position: relative;">**
            **<ul style="margin:0px; float: right" id="navbar">**
                <li>  ....

#navbar{float:left/right}