芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
13

腾讯首页顶部整屏导航 Bug

作者 芒果/分类 代码/发布于 2010-09-05 09:58

腾讯首页淘宝首页顶部都采用了整屏导航。页面主体宽度腾讯用的是 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="http://mangguo.org/qq-homepage-top-full-screen-nav-bug/" title="腾讯首页顶部整屏导航 Bug" rel="bookmark">腾讯首页顶部整屏导航 Bug | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 13 条群众意见

  1. 捷易通 /2010-09-05 11:01

    大哥都这么牛,研究一些 css 这么深入。 回应

    #1
  2. 书香阁 /2010-09-05 18:18

    好厉害哦。 回应

    #2
  3. 哲哲 /2010-09-05 21:29

    有这个看着很专业··也大气·· 回应

    #3
  4. 魔卡 /2010-09-08 10:15

    腾讯是以低端人群为基础的,使用 IE6 是他们测试后的选择结果。 回应

    #4
  5. 芒果TV /2010-09-15 13:38

    专业! 回应

    #5
  6. 扒衣网 /2010-09-17 11:37

    这都能被你发现?!! 回应

    #6
  7. WPYOU /2010-09-22 11:48

    用了腾讯的财付通后,你就知道这根本算不上 bug,财付通的那已经是严重影响使用的问题了。 回应

    #7
  8. WPYOU/2010-10-12 11:24

    你好,能不能详细说一下财付通是什么问题?我试了一下好像没发现什么。 回应

    #8
  9. WPYOU/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者具体的设计区别在哪,我只知道我用支付宝非常的流畅没有任何伤脑筋的地方。 回应

    #9
  10. WPYOU/2010-10-12 12:50

    真的非常非常感谢你……我在做作业,这段话对我非常有参考价值……谢谢! 回应

    #10
  11. 第五代 /2010-11-23 10:03

    你也太细了!佩服。 回应

    #11
  12. 捷易通 /2011-05-03 20:06

    研究的真是很细致啊 回应

    #12
  13. 美思满 /2011-11-15 10:38

    这都能被发现 回应

    #13

下面我简单说几句