Question

我在这里尝试调试问题的一个小演示：http://jsfiddle.net/bvDBb/7/。

文本缩进按照预期（或至少按我预期的方式）在Chrome，Firefox和Opera中工作 - 它缩进文本的第一行，然后再次执行换行以保持填充正确。

然而，当在Safari（OS X 10.7.4上的5.1.7）中查看而不是包装文本时，它会创建一个水平滚动条，只是将第一行向右移动 - 并且有足够大的缩进，部分该行被隐藏，你必须滚动才能看到它。

这是Safari中的错误，还是我很幸运，其他浏览器都支持它？

编辑：

由于Keith关于在文本周围添加<p></p>的想法修复了布局（至少在Safari上，没有在Win上尝试FF），问题仍然更像是：正确的行为是什么以及为什么？< / p>

Answer 1

尝试在overflow-x:hidden;

中的overflow-y:auto;下添加.content

Answer 2

你应该使用实际的CSS属性text-indent来获得像这样的文本缩进。如：

<div class="contentWrapper">
  <div class="content" style="text-indent: 100px;">
    <img src="image.jpg" alt="some image" />
    <p class="indent-me">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porta mattis lectus, in fringilla magna posuere vitae.</p>
  </div>
</div>

p.indent-me {
  text-indent:30px;
}

Answer 3

使用'em'代替'px'

text-indent:30em;

Answer 4

您可以尝试以下操作，它可以在桌面和移动Safari上完美运行。

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
text-indent: 30px;
}

Safari中的文本缩进错误或预期行为？

4 个答案: