【问题标题】:margin-top on firefox and chromeFirefox 和 chrome 上的边距顶部
【发布时间】:2014-05-25 20:13:29
【问题描述】:

我的网站上有一个侧边导航栏。侧边栏与您一起滑动并更改页边距顶部。 在 google chrome 上,它会跟随你,而在 Firefox 中,它会让所有框都跟随你,这不会让你向下滚动页面。 http://jsfiddle.net/rDV3T/ 这是一个例子。

<span class="hi">HI</span>
<span class="hello">Hello</span>

CSS

.hi {
    margin-top: 10px;
    background-color: red;
    display: inline-table;
}
.hello {
    display: inline-table;
}

如果您在 Firefox 上进行测试,所有框都会下降 10 像素,而在 chrome 中只有分配的框 (hi) 会下降。 我该如何解决这个问题? 谢谢你,对不起我糟糕的英语和解释。

【问题讨论】:

    标签: css browser margin


    【解决方案1】:

    如果您将 vertical-align: top; 添加到您的 hello 类中,则该示例在所有浏览器上看起来都一样。

    .hello {
        display: inline-table;
        vertical-align: top;
    }
    

    【讨论】:

      【解决方案2】:

      您应该使用 CSS 浮动属性。代替display:inline-table,使用float:left 使所有框都向左浮动。 (您还需要一个 &lt;div&gt; 和属性 clear:both 在您的两个跨度之后。)

      【讨论】:

      • 当我使用浮动时,我的所有页面都“中断”。我可以修复它,但它看起来不一样。不过还是谢谢
      【解决方案3】:

      您可以使用display: inline-block 解决您的问题或输入.hello vertical-align: bottom;

      LIVE DEMO

      .hi {
          margin-top: 10px;
          background-color: red;
          display: inline-table;
      }
      .hello {
          display: inline-table;
          vertical-align: bottom; 
      }
      

      【讨论】:

      • 当我添加底部时,Firefox 和 chrome 都没有任何变化,但垂直对齐:顶部有效。还是谢谢你
      • 你确定吗?您在这里看到DEMOvertical-align: top;... 但是,如果您说top 为您工作... 好吧! :)
      猜你喜欢
      • 2014-04-16
      • 1970-01-01
      • 1970-01-01
      • 2018-07-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多