Question

这条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

Answer 1

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

我从宽度调用中删除了min-，它现在正确地显示出来了。

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

Answer 2

无法在我的Safari版本上复制它（我使用的是7.0版）;但是你可以通过CSS的位置属性来实现相同的效果。

尝试将CSS修改为：

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

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

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

Answer 3

对于Safari，我们可以使用

min-width: 0;

因为Safari有min-width：auto; ||最小宽度：100％;

Answer 4

我怀疑（来自类似但更复杂的情况）某些较旧的Safari版本忽略了仅被声明为id的CSS标记（与#a和{{1一样） }}）。

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

#b

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

Answer 5

我正在使用min-width: auto我已适时更改为min-width: 0并且事情进展顺利。另一个可能提供更多见解的答案 - Safari and Chrome ignore min-width CSS propery

为什么Safari会忽略min-width和text-align？

5 个答案: