负边际仅与IE有关

Question

我在IE中导航栏下拉定位时出现问题。

正如您所看到的，Adhesive Tapes下拉列表在悬停时定位正确，但是当鼠标悬停在＆＃39; Adhesives＆＃39;并且Sealants略微偏离了位置。

我在Firefox中检查了它，它只是相同但只有几个像素。

我今天早上花了一些时间试图解决它，但只是知识有限。

任何帮助都会很棒。

www.stickyproducts.co.uk

HTML：http://pastebin.com/z7tu6wCX

CSS：http://pastebin.com/XjnXqEN8

提前感谢您提供任何帮助

Answer 1

我个人不会将下拉菜单的位置设置为-999。我会将它放在需要的确切位置，然后将visibility:属性设置为hidden;

类似这样的事情

.dropdown_4columns_sealants {

margin:4px auto;
float:left;
position:absolute;
left:-999em; /* I would set this to position where it should be all the time */
text-align:left;
padding:10px 5px 0px 5px;
border:1px solid #777777;
border-top:none;
z-index: 999;

visibility: hidden; /* I would set this to hide the menu right where it is at */

}

然后在我的JavaScript中，当您将鼠标悬停在链接上而不是从原始visibility重新定位时，我会将-999em属性更改为可见。

Answer 2

我不认为您的下拉列表有问题，除非我还没有看到其他内容。但是我确实看到你强行留下了-9px的余量。我纠正了这一点。这是代码更正和前后图片

 #menu, .nav-cush {
     margin: 0px;
 }

.overhang-right {
    float: right;
    position: relative;
    right: 0px;
}

你实际上可以替换已经为它们制作的css中的那些边缘修正，而不是复制和粘贴我给你的确切代码。这样你就不必使用！important来覆盖任何东西。

因为您在不同的浏览器中显示多个行为。我用浏览器黑客编辑了下面的行。我在所有浏览器中测试过它们都有效。请自行进行一些测试，并告诉我是否需要工作或将其标记为答案，以便其他人可以从中受益。

查找并替换以下内容：

.dropdown_4columns_adhesives {
     width: 988px;
     float: left; 
     margin: 11px 0 0 -204px; /* Chrome & Safari */
     margin: 11px 0 0 -198px \0/IE9; /* IE9+ & Opera*/
 }
 @-moz-document url-prefix(){
    .dropdown_4columns_adhesives {margin: 11px 0 0 -203px;} /* Firefox */
 }
 .dropdown_4columns_sealants {
     width: 988px;
     margin: 11px 0 0 -349px; /* Chrome & Safari */
     margin: 11px 0 0 -339px \0/IE9; /* IE9+ & Opera*/
 }
 @-moz-document url-prefix(){
    .dropdown_4columns_sealants {margin: 11px 0 0 -348px;}/* Firefox */
 }

这表示您的菜单栏被推到左侧

这会显示您的菜单栏和广告图片已更正

Answer 3

处理您正在做的事情的更好方法是将下拉列表绝对定位在主ul#menu（设置为相对）中。另外，取位置：#menu li

的相对OFF

这样您就可以将下拉列表设置为position:absolute; top:100%; left:0; right:0;。

你现在拥有它的方式（使用负边距处理）取决于浏览器＆＃39;字体渲染。正如您所知，浏览器之间并不一致。

这样做你不必为各个子菜单指定任何内容。 top:100%; left:0; right:0;可以用于所有3。

另一种选择是在所有顶级菜单链接上设置特定宽度。