html - 跨浏览器内联 block 对齐

标签 html css safari

<分区>

我在 safari 上遇到这种奇怪的行为,但在 chrome 或 firefox 上不会发生。我有一个带有相同大小的框(内联 block )的布局。框内有文本,在带有“溢出:隐藏;”的 div 内。在 chrome 和 firefox 上,框完全对齐,但在 safari 上,如果文本超过一行,框会“向上移动”,从而弄乱对齐。任何有助于理解和纠正这一点的帮助将不胜感激。谢谢。

CSS:

.pb {
    background: #ddd;
    display: inline-block;
    margin: 4px;
    padding: 16px;
}
.pb .dt {
    width: 100px;
}
.pb .qt {
    height: 15px;
    overflow: hidden;
}

HTML(每个框):

<div class="pb">
    <div class="dt">
        <div class="qt"><span>TEXT HERE</span> 
        </div>
    </div>
</div>

jsfiddle here

最佳答案

您需要设置vertical-align 属性:

.pb {
    background: #ddd;
    display: inline-block;
    margin: 4px;
    padding: 16px;
    vertical-align:top;
}

jsFiddle example

关于html - 跨浏览器内联 block 对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18705451/

上一篇:css - 如何让框阴影从粗边框下方开始?

下一篇:jquery - 我无法让 jquery .width() 工作

相关文章:

html - Bootstrap 按钮组未在面板页脚中正确显示

html - Materialisecss 对齐多个开关

css - 需要使用 CSS 属性创建弹出窗口

Safari 中的 JQuery TOOLS 叠加层与页面左侧而不是页面中间对齐

javascript - 让JS执行一个函数,通过加载另一个html文件

html - div 元素重叠而不是垂直对齐

html - 100% 宽度图像水平滚动

java - 使用 values/strings.xml、HTML 和 CSS 格式化 TextView 文本

ios - 当我尝试从网站启动我的应用程序时出现 "Safari cannot open the page because the address is invalid"消息

jquery - 容器高度变化让 child 在游猎时摇晃