恳请各位朋友帮我看看这个HTML里面的NAV菜单末尾空白的问题。谢谢大家!

姑妄听之 发布于 2012/12/11 10:53
阅读 636
收藏 0

各位朋友大家好。我向大家请教一个HTML里面NAV菜单右端多余的空白空间的问题。请大家多多指教。

先上代码。我的HTML代码是这么写的:

<nav>
				<ul id="tabs">
					<li>
						<a id="tab1" class="current" href="#" tabindex="1">HOMEPAGE</a>
					</li>
					<li>
						<a id="tab2" href="#" tabindex="2">SERVICES</a>
					</li>
					<li>
						<a id="tab3" href="#" tabindex="3">PROJECTS</a>
					</li>
					<li>
						<a id="tab4" href="#" tabindex="4">PRODUCTS</a>
					</li>
					<li>
						<a id="tab5" href="#" tabindex="5">CONTACTS</a>
					</li>
				</ul>
			</nav>

相关的CSS代码是这样的:

/* http://www.red-team-design.com/google-play-minimal-tabs-with-css3-jquery */

#tabs {
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
	
	border-style:solid;
	border-width:1px;
	border-color:red;	
}

#tabs li {
	float: left;
	/*margin: 0 -15px 0 0;*/	
}

#tabs a {
	font-family: 'Port Lligat Sans', sans-serif;
	font-weight: bold;
	float: left;
	position: relative;
	padding: 0 30px;
	height: 0;
	line-height: 30px;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	border-bottom: 30px solid #3D3D3D;
	border-bottom-color: #777;
	opacity: .3;
	filter: alpha(opacity=30);	
}

#tabs a:hover, #tabs a:focus {
	border-bottom-color: #2ac7e1;
	opacity: 1;
	filter: alpha(opacity=100);
}

#tabs a:focus {
	outline: 0;
}

#tabs .current {
	z-index: 3;
	border-bottom-color: #3d3d3d;
	opacity: 1;
	filter: alpha(opacity=100);
}


我为了下面的内容和NAV菜单两边对齐,用了一段javascript代码去设置body的宽度,代码是这样的:

<script>
        	function updatePageW() {
        		
        		var wNav = 0;
        		$('#tabs li').each(function () {
        			var wLi = $(this).outerWidth(true);
        			console.log('wLi = ' + wLi);
        			wNav += wLi;
        		});        		
        		console.log('wNav = ' + wNav);
        		
        		$('body').width(wNav + 1);
        	}  
        			
			$(document).ready(function () {
				updatePageW();
			});
		</script>

我的这个网页,在IE9里面看起来是一切正常的。截图如下。请注意截图中的Log输出。这个数值,都是和用屏幕像素尺子量出来的是一致的。



但是我的网页在FF里面看到的是不正常的。在FireFox中网页看起来是这样的:

请大家注意看截图中的两个地方。第一,是NAV菜单的右边,多出来了一段空白。这个是因为上面的那个script在求取菜单按钮宽度的时候出现了错误的输出。请看FF里面的Log输出,每个按钮的宽度,都比IE里面多出了十多个像素。这是不对的,因为我用screen ruler量出来的结果,和IE里面的一致。

请问大家,这FF里面,为什么我的script会多计算出一些像素呢?

再请大家看一下Chrome里面的截图。

首先,Chrome里面显示也是不对的。因为右端菜单和下面的内容没有对齐。Chrome里面的Console输出,和FF里面的是完全一致的,也就是说,每个按钮都比应该的数字,多了十几个像素。但是,Chrome本身的Element工具给出的按钮宽度的数字,又和我的script给出的不同。



谢谢大家了!这个问题真的是弄到我头疼。恳请大家的慷慨帮助。谢谢!!

以下是问题补充:

@姑妄听之:问题解决了!虽然不知道为什么,但是调整了一下各个script的顺序,把html里面挤在一起的script放到几个分别的js文件中以后,这个问题就不存在了。。。。不知道是怎么回事,但是也不太想知道了。 现在网页上不用这个办法了。直接设置了body是700px。简单容易。 (2013/01/02 17:08)
加载中
0
缪斯的情人
缪斯的情人
#tab a应该作为一个block处理,display:block
姑妄听之
姑妄听之
谢谢。不过改了以后问题还是一样的。
0
姑妄听之
姑妄听之
顶起来,请大家帮忙看看。
0
y
yjz
最好是挂在网上,好分析,给个地址
姑妄听之
姑妄听之
谢谢。
0
姑妄听之
姑妄听之
顶起来。请大家帮忙看看。谢谢。
0
y
yjz
问问为啥要用JS设定BODY宽度,用父包NAV与内容不是很好控制吗?
0
姑妄听之
姑妄听之

引用来自“yjz”的答案

问问为啥要用JS设定BODY宽度,用父包NAV与内容不是很好控制吗?

你好啊,谢谢关注。是这样的。一开始的时候我用的是:

body {
	background-color: #EEEEEE;
	background-image: url("data:image/gif;base64,R0lGODlhCAAIAJEAAMzMzP///////wAAACH5BAEHAAIALAAAAAAIAAgAAAINhG4nudroGJBRsYcxKAA7");
	
	width: 700px;
        margin-left:auto;
        margin-right:auto;
}
也就是说直接设定了body的宽度,没有用原帖中的js去动态设定。那么这么做以后,我发现NAV菜单最后一个li后面的那个留白,在不同的浏览器中是不一样的。IE中比较窄,而FF和Chrome中比较宽。所以,如果我调整body的宽度,让他正好可以在IE中容纳整个NAV的菜单,但是又不会让人感觉下面的文字在右边对不齐的时候;同样的设置(body的宽度),在FF和Chrome里面,就会让菜单的最后一个项目跑到下一行了(因为不够宽)。有朋友建议我解决这个问题的方法可以考虑把ul的背景改成和li的背景一样。这样的话,最后多余出来的那一段留白,也就看起来和菜单按钮一样了。这样做当然也可以达到效果,但是这个并不是我的本意。所以我就想,如果是我用js来动态设定这个宽度,是不是就可以解决这个在不同浏览器中,ul宽度不同的问题了呢?于是就有了主贴中的尝试。。。。很明显,这个尝试失败了,但是我想不出来失败的原因。所以发帖子上来向大家问问。

0
y
yjz

 $('body').width(wNav + 1);  这句不说都包括NAV,NAV中的子是没有设定固定宽度,会相对变化,

第二,网页工作在那种模式,也是有区别的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

0
姑妄听之
姑妄听之

引用来自“yjz”的答案

 $('body').width(wNav + 1);  这句不说都包括NAV,NAV中的子是没有设定固定宽度,会相对变化,

第二,网页工作在那种模式,也是有区别的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

谢谢。

我没太看明白这句话的意思:“$('body').width(wNav + 1);  这句不说都包括NAV” 可以请你解释一下吗?什么叫不说都包括NAV?

NAV中的子是没有设定固定宽度,会相对变化”,这个可能就是我最开始要使用js设置宽度的原因。因为我观察到NAV中的按钮在不同的浏览器中宽度不一样,所以才有了用js来在当场获取宽度的想法。现在的问题是为什么用js在当场获取的数值是不正确的(FF和Chrome中)。

第二,网页工作在那种模式,也是有区别的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">” 这句话没看明白你是建议我做什么?是说把那行话加到我的HTML文件头,然后再试试的意思吗?

0
y
yjz

第一个是:可能是每种浏览器默认margin与padding不一样,可用如下清除,试试

<style>

* {

    margin:0px;

   padding:0px';

}

</style>


第二:是指浏览器对CSS盒模式解析有不同差异的标准

http://www.w3cn.org/article/step/2004/26.html

0
陈卿强
陈卿强
要使用reset.css
返回顶部
顶部