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

Question

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

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

但是，当在 Safari（OS X 10.7.4 上的 5.1.7）中查看而不是换行时，它会创建一个水平滚动条并将第一行向右移动 - 并且缩进足够大，部分行得到隐藏，您必须滚动才能看到它。

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

编辑：

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

Answer 1

您应该text-indent对这样的文本缩进使用实际的 CSS 属性。如：

<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 2

尝试 overflow-x:hidden;在下面 overflow-y:auto;添加.content

Answer 3

使用“em”而不是“px”

text-indent:30em;

Answer 4

您可以尝试以下方法，它在桌面和移动 Safari 上都能完美运行。

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