我正在使用一个名为MagicLine的模板(不要让我发布链接到它,所以把它扔在谷歌,你会很容易找到它。抱歉)
问题示例可在此处找到:http://lesiondesign.com/test/elite/
问题摘要: 使用此模板构建我的导航。在Opera的评论中发布了一个似乎有用的修复程序,并且在大多数情况下导航看起来很棒。然而,似乎存在导航大小(被javascript钩住)在整个屏幕上自身大小的问题。这在Chrome中出现了很多,我通常只在Firefox中刷新很多东西之后才看到它。点击导航项后,它似乎总是很小。
代码细节:
的Javascript
$magicLineTwo
//The next line is what sets the width, sometimes my width is set to 1800px as opposed to the 60px that is correct. This does not happen every time which is why this problem is so difficult to solve.
.width($(".current_page_item_two").width())
.height($mainNav2.height())
.css("left", $(".current_page_item_two a").position().left)
.data("origLeft", $(".current_page_item_two a").position().left)
.data("origWidth", $magicLineTwo.width())
.data("origColor", $(".current_page_item_two a").attr("rel"));
CSS
这里的宽度是一个真正无关紧要的预设,如果你把它改成微小它可以产生效果,但是大多数情况下,只要设置为某个东西,javascript就会正确调整它
#example-two #magic-line-two {
position: absolute;
float: none;
top: 0; left:
0; width:100px;
background: #000;
opacity:0.4;
filter: alpha(opacity = 40);
z-index: 100;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
HTML
以列表格式设置,并且确实没有什么特别的东西可以影响调整大小。
如果有人知道为什么导航器会在大多数情况下正确调整大小并在其他时间分崩离析我会非常感激。我似乎很难让代码分崩离析,但只占10%的时间。
由于
答案 0 :(得分:1)
$mainNav2.height()
是问题所在,因为ul
的{{1}} line-height
因此,阴影也会获得可用的高度。
此60px
的宽度在我的屏幕上也是1207,看起来屏幕尺寸不是#magic-line-two
。
同样ul
是没有意义的,因为#example-two #magic-line-two {}
应该是唯一的任何方式:)