腾讯首页和淘宝首页顶部都采用了整屏导航。页面主体宽度腾讯用的是 960px,淘宝则是 950px。
当然现在的主流显示器分辨率都在1024 宽度以上。这种情况下这个顶部的导航条没有任何问题。但是如果缩小浏览器窗口,就能发现腾讯这个导航的一个 Bug。当浏览器可视区域宽度小于页面主体宽度(腾讯这里是 960px)时,导航条无法撑开整个页面可视区域。如下图所示:
同样的问题,淘宝采用了 body 上设定背景平铺的方法,防止低分辨率或者浏览器窗口可视区过小引起的 Bug。
body{background:url("http://img07.taobaocdn.com/tps/i7/T1n7JHXfVtXXXXXXXX-120-70.png") repeat-x 0 -44px;}
当然腾讯的做法在 IE6 下没有任何问题,但是 IE7/IE8/Firefox 下都会产生这个古怪的 Bug。简单地试验了下,顶部导航条容器的样式可以这样来写:
margin:0 auto;min-width:960px;
这里的 960px 需要根据实际情况修改为页面主体宽度,保证在支持 min-width 属性的浏览器下缩放不至于撑不开页面。
版权所有,转载请注明出处。
转载自 <a href="https://mangguo.org/qq-homepage-top-full-screen-nav-bug/" title="腾讯首页顶部整屏导航 Bug" rel="bookmark">腾讯首页顶部整屏导航 Bug | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。
/2010-09-05 11:01大哥都这么牛,研究一些 css 这么深入。
/2010-09-05 18:18好厉害哦。
/2010-09-05 21:29有这个看着很专业··也大气··
/2010-09-08 10:15腾讯是以低端人群为基础的,使用 IE6 是他们测试后的选择结果。
/2010-09-15 13:38专业!
/2010-09-17 11:37这都能被你发现?!!
/2010-09-22 11:48用了腾讯的财付通后,你就知道这根本算不上 bug,财付通的那已经是严重影响使用的问题了。
/2010-10-12 11:24你好,能不能详细说一下财付通是什么问题?我试了一下好像没发现什么。
/2010-10-12 11:52虽然已经开通快2月了,但很多bug的问题我还是依然记得很清楚。
1,(个人版)注册成功,登录后,显示的“欢迎您,姓名” 和“上午好,姓名” 2处的 “姓名”显示为乱码,后来客服让我使用申诉修改后才显示正常;(企业版)在Firefox下依然显示为乱码:您好,120***3201(¹ÜÀíÔ±)。
2,在Firefox下,多处密码输入表单,提示“无法输入登录密码?请点此安装安全控件后刷新”,下载安装后重开浏览器问题依旧,无法输入;
3,另外,概念容易混淆,个人版和企业版申请后,都有对应的商户号和密码通过邮件发我,(个人版)是对应QQ号,(企业版)是一串120***3201数字;在使用类似Discuz的后台接口时不知道填哪个。
4,(个人版)和(企业版)跟我使用的支付宝貌似不同,是独立的2个账户,让使用操作变的非此复杂而且容易产生混淆冲突;
5,最难以忍受的,我只用了(企业版),为什么用户付款到账户,不能直接提现?记得好像是必须满500后才可以,那我永远满不了500,那499的话就永远没法拿到了? 这一点支付宝是1块钱都可以提现的吧。
6,我的(企业版)账户信息如下:
现金账户总额:0.00元
可用余额:0.00元
未结算金额:490.00元
但包括“交易记录”在内的栏目里都没法找到具体的订单详情,这一点跟支付宝也是没法比的。
我只关注使用体验,不知道2者具体的设计区别在哪,我只知道我用支付宝非常的流畅没有任何伤脑筋的地方。
/2010-10-12 12:50真的非常非常感谢你……我在做作业,这段话对我非常有参考价值……谢谢!
/2010-11-23 10:03你也太细了!佩服。
/2011-05-03 20:06研究的真是很细致啊
/2011-11-15 10:38这都能被发现