CSS/Jquery在Safari&;即
我使用jQuery在页面顶部创建一个固定的下拉子导航,当您将鼠标移到固定导航上时 为此,我将以前相对定位的元素更改为固定定位。然而,这在IE7和Safari中产生了不希望的10px余量 起初我以为这是css框阴影产生的边距,但在删除这行代码后,结果证明情况并非如此 非常感谢您的任何见解或建议 CSS:CSS/Jquery在Safari&;即,jquery,html,css,fixed,Jquery,Html,Css,Fixed,我使用jQuery在页面顶部创建一个固定的下拉子导航,当您将鼠标移到固定导航上时 为此,我将以前相对定位的元素更改为固定定位。然而,这在IE7和Safari中产生了不希望的10px余量 起初我以为这是css框阴影产生的边距,但在删除这行代码后,结果证明情况并非如此 非常感谢您的任何见解或建议 CSS: #headerContainer { width: 940px; position: relative; left: -10px !important; z-ind
#headerContainer {
width: 940px;
position: relative;
left: -10px !important;
z-index: 900;
border: 1px solid red;
}
#header {
position: relative;
width: 940px;
background: #fff;
padding: 74px 0 20px 20px;
z-index: 1000;
box-shadow: 0px 0px 13px #c3c1bd;
-moz-box-shadow: 0px 0px 13px #c3c1bd; /* Firefox */
-webkit-box-shadow: 0px 0px 13px #c3c1bd; /* Safari, Chrome */
}
#nav {
width: 100%;
height: 49px;
position: fixed;
left: 0;
top: 0;
z-index: 2000;
}
#nav ul {
height: 49px;
width: 920px;
display: block;
}
#nav ul li {
height: 32px;
list-style: none;
display: block;
float: left;
background: #000;
border-left: 1px solid #fff;
padding: 7px 14px 0 14px;
font-family: "Fette";
letter-spacing: 1px;
text-transform: uppercase;
}
#nav ul li a {
display: block;
color: #ccc;
width: 100%;
height: 100%;
}
#nav ul li a:hover {text-decoration: none}
.showNav {
display: block !important;
position: relative !important;
top: 0px !important;
padding-bottom: 20px !important;
}
JQUERY:
$(window).scroll(function() {
var scrolledpx = parseInt($(window).scrollTop());
if (scrolledpx < 375) {
$('#nav ul, #header').unbind('mouseenter mouseleave');
$('#header').addClass('showNav');
} else {
$('#header').removeClass('showNav');
$('#nav ul').hover(function () {
$('#header').slideDown('fast').css({
'position' : 'fixed',
'top' : '0px'
});
}, function () {
});
$('#header').hover(function () {
}, function () {
$('#header').slideUp('fast');
});
}
});
$(窗口)。滚动(函数(){
var scrolledpx=parseInt($(window.scrollTop());
如果(滚动像素<375){
$('nav ul,#header')。解除绑定('mouseenter mouseleave');
$('#header').addClass('showNav');
}否则{
$('#header').removeClass('showNav');
$('#nav ul')。悬停(函数(){
$('#header').slideDown('fast').css({
'位置':'固定',
“顶部”:“0px”
});
},函数(){
});
$('#header')。悬停(函数(){
},函数(){
$('标题').slideUp('快速');
});
}
});
HTML:
<div id="wrapper">
<div id="nav">
<ul class="center">
<li id="logo">
<a href="index.html">
<img src="assets/images/logo.png" alt="" />
</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contributors</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul> <!-- nav -->
</div>
<div id="headerContainer" class="center">
<div id="header">
<h3 id="scrapHeader">Thoughts About:</h3>
<input id="headerSearch" type="text" value="search" />
<input id="headerSearchBtn" type="submit" value="" />
<div class="clear"></div>
<div id="categoryContainer">
<ul>
<li>
<a href="#">Design</a>
<strong>143</strong>
</li>
<li>
<a href="#">Building</a>
<strong>143</strong>
</li>
<li>
<a href="#">Brands</a>
<strong>143</strong>
</li>
<li>
<a href="#">Technology</a>
<strong>143</strong>
</li>
</ul>
<span id="categoryMore">More</span>
<div class="clear"></div>
</div> <!-- categoryContainer -->
<div class="clear"></div>
</div> <!-- header -->
<div class="clear"></div>
</div>
-
-
-
-
关于:
-
143
-
143
-
143
-
143
更多
您提供的HTML与CSS没有什么关系,您能提供更多的HTML吗?添加了一些更相关的CSS和HTML-非常感谢,这10px真让我受不了!你提供的HTML与CSS没有什么关系,你能提供更多的HTML吗?添加了一些更相关的CSS和HTML-非常感谢这10px真让我受不了!需要增加容器元素的宽度以适合其子元素。显然。需要增加容器元素的宽度以适合其子元素。明显的
#headerContainer {
width: 960px;
position: relative;
z-index: 900;
border: 1px solid red;
}
#header {
position: relative;
width: 940px;
background: #fff;
padding: 74px 0 20px 20px;
z-index: 1000;
box-shadow: 0px 0px 13px #c3c1bd;
-moz-box-shadow: 0px 0px 13px #c3c1bd; /* Firefox */
-webkit-box-shadow: 0px 0px 13px #c3c1bd; /* Safari, Chrome */
}