为什么 Safari 忽略最小宽度和文本对齐？答案

【问题标题】：Why is Safari ignoring min-width and text-align?为什么 Safari 忽略最小宽度和文本对齐？
【发布时间】：2014-01-28 16:07:47
【问题描述】：

这段 HTML 在除 Safari 之外的所有浏览器中都在页面右侧呈现单词“TEST”，其中文本显示在页面左侧：

<style>
#a{
    min-width: 100%;
}

#b{
    text-align: right;
}
</style>

<body>
<table id="a">
<tr>
    <td id="b">
        TEST
    </td>
</tr>
</table>
</body>

可能是什么原因造成的，有哪些可能的解决方法？

这是JSFiddle link

【问题讨论】：

您的小提琴在 Safari 上正确显示，它使用 WebKit 进行渲染（类似于最近的旧版 Chrome）。您是否尝试过清除缓存？还有你用的是什么版本的 Safari？

标签： html css safari

【解决方案1】：

我复制了结果。我在 MAC 上的 Safari 5.1.8 版中看到了窗口Left 一侧的文本。

我从宽度调用中删除了min-，它现在正确显示在右侧..

http://jsfiddle.net/U87aK/2/

【讨论】：

这似乎是正确的解决方案。这个stackoverflow帖子有更多关于min-width问题的信息：stackoverflow.com/questions/7084990/…

【解决方案2】：

无法在我的 Safari 版本上复制它（我使用的是 7.0 版）；但是你也可以通过 CSS 的 position 属性实现同样的效果。

尝试将您的 CSS 修改为：

#a{
    min-width: 100%;
    position:relative;
}

#b{
    text-align: right;
    position:absolute;
    right:0;
}

这是小提琴： http://jsfiddle.net/z3tT2/

【讨论】：

没用。这会在我的 Safari 版本上将测试从屏幕上抛出，这重复了他的错误。我不得不将您的小提琴调整为 -29 以显示整个单词“TEST”jsfiddle.net/z3tT2/1
@Phlume 我正在使用 Safari v7.0。你更新的小提琴渲染在我的身上被切断了。至少我们确定这是一个浏览器兼容性问题。

【解决方案3】：

我怀疑（来自类似但更复杂的情况）一些旧版 Safari 会忽略声明为 id-only 的 CSS 标记（就像您对 #a 和 #b 所做的那样）。

你能告诉我，这是否可行（对于有问题的浏览器）？

<style>
#a table{
    min-width: 100%;
}

#b td{
    text-align: right;
}
</style>

<body id="a">
<table>
<tr id="b">
    <td>
        TEST
    </td>
</tr>
</table>
</body>

注意：这不是应该如何编码的，而是浏览器工作方式的演示（或不演示）。

【讨论】：

【解决方案4】：

对于 Safari，我们可以使用

min-width: 0;

因为 Safari 存在 min-width: auto; 的问题。 ||最小宽度：100%；

【讨论】：

【解决方案5】：

我使用的是min-width: auto，我适时将其更改为min-width: 0，并且一切正常。另一个可能会提供更多见解的答案- Safari and Chrome ignore min-width CSS propery

【讨论】：