Ruby China

新手问题 在 AlphaLiu 帮助下，我要的 Affix 效果有了，不过 IE 下又不兼容了，求教！

yuanchunfa · 2013年01月19日 · 最后由 yuanchunfa 回复于 2013年01月20日 · 4089 次阅读

把 docs.css 下好了，然后达到了 bootcss 的效果，不过宽度太宽了，于是自己设置一下宽度，在 Firefox，Chrome 上都达到要求了，但是 IE9 上依然还是默认宽度。搜索加上!important 也没有达到效果，现在用 win7 的多吧，IE9 还是有很多人用吧，WinXP 下的 IE6、7、8 就不去管了，求指导！ IE9 效果： Firefox18 效果： 代码：

div class="row"
  div class="span2 bs-docs-sidebar"
    ul class="nav nav-list bs-docs-sidenav affix" style="width:150px!important;"
      li class="active"
        a href="#about"
          i class="icon-chevron-right"
          | 关于我们
      li
        a href="#train"
          i class="icon-chevron-right"
          | 关于培训
  div class="span10"
    section id="about"
      div class="page-header"
        h6 关于我们
huacnlee #1 2013年01月19日

猜测是你吧 A 标签设置 display:block 了，而外面的 li 也是有这个，这种情况 IE 下面就会变大

你试试将 li 设置为 display:inline

yuanchunfa #2 2013年01月20日

#1 楼 @huacnlee 谢谢华顺老大，指出 display:block，激起我看源码 docs.css 的兴趣，的确有：

.bs-docs-sidenav > li > a {
    display: block;
    width: 190px \9;
    margin: 0 0 -1px;
    padding: 8px 14px;
    border: 1px solid #e5e5e5;
}

于是我在设置一下 a 的 width，于是 IE 跟 Firefox 都解决了，下面是我的代码：

div class="row"
  div class="span2 bs-docs-sidebar"
    ul class="nav nav-list bs-docs-sidenav affix" style="width:150px;"
      li class="active"
        a href="#about"  style="width:120px; \9"
          i class="icon-chevron-right"
          | 关于我们
      li
        a href="#train" style="width:120px; \9;"
          i class="icon-chevron-right"
          | 关于培训
  div class="span10"
    section id="about"
      div class="page-header"
        h6 关于我们
需要 登录 后方可回复, 如果你还没有账号请 注册新账号