Question

我正在尝试创建文本段落，其中每个单词实际上是包含文本的div和在其上方的画布（长篇故事！）。这意味着我最终在每个段落中都有一系列div，我将其设置为内联块。这些div看起来太靠近了，所以我使用CSS word-spacing属性来增加它们之间的间距。

这适用于除Safari之外的所有浏览器。在Safari（OS X和iOS）上，即使我修复容器的宽度，单词也会溢出包含div的边缘。我怀疑这是Safari中的一个错误，因为所有其他浏览器似乎都以同样的方式呈现我的HTML，但有没有人有办法解决它？

我已将问题提炼到此示例HTML：

<html>
    <head>
        <style>
            #box1 {
                width: 300px;
                background: Red;
                word-spacing: 50px;
            }

            #box1>div {
                display: inline-block;
            }

            #box2 {
                width: 300px;
                background: Green;
                word-spacing: 50px;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <div>This</div> <div>text</div> <div>should</div> <div>look</div <div>the</div> <div>same</div> <div>in</div> <div>both</div> <div>boxes</div> <div>but</div> <div>it</div> <div>doesn't</div> <div>in</div> <div>Safari</div>
        </div>
        <div id="box2">
            This text should look the same in both boxes but it doesn't in Safari
        </div>
    </body>
</html>

这也可以在这里被视为JS小提琴：http://jsfiddle.net/4eh6G/

P.S。在旧版本的Safari上，似乎存在一个不同的问题，在这个例子中，字间距似乎根本没有任何影响。对此的任何修复显然也会很棒！

当应用字间距时，为什么Safari渲染内联块不一致？

0 个答案: