如何在Safari阅读器中强制每张图片后换行？

Question

我无法在本地HTML文件中激活Safari Reader，因此我不能给您一个运行示例，只能描述我的问题：

我的博客文章的标记基本上是这样的：

<div class="post">
 <div class="post-header">Hello, World</div>
 <div class="post-body">
  <p>Look at this picture:</p>
  <p><img src="http://37prime.com/news/wp-content/uploads/2008/03/safari_icon.png"/></p>
  <p>Isn't that a nice picture?</p>
 </div>
</div>

这在所有浏览器中看起来都很正常，包括Safari。然而，在Safari Reader中，第三段“这不是一张漂亮的图片吗？”围绕着图片浮动，而不是独立成为一个段落。

有人遇到过类似的问题吗？

- fhd

---

我曾经忽略了这个问题一段时间（遗憾的是，你提供的建议都没有对我起作用），只是出于好奇，我又在Safari Reader中尝试了一下。不知何故，这个问题现在已经不再出现了。与此同时，我对我的CSS进行了几次更改，所以我的原始CSS可能导致了这些问题（或者这是Safari的一个bug，而我没有注意到它更新）。 - fhd

Answer 1

不要只使用<br />，而是要使用<br clear="all" />。

- senorgoose

---

哇，不错的属性。 - Vlad

Answer 2

.post-body img {
  display: block;
}

应该就能解决问题了。

- user253984

Answer 3

<img src='ImagePath' alt="not found" style="display:block">

- TheKingPinMirza

Answer 4

在每行结尾/之后使用<br/>标签

- Brock Woolf

---

请看我对Taylor Satula的回答的评论。简而言之：它不起作用。 - fhd

Answer 5

是的，您可以尝试在“picture:”后面加上<br>换行符号。虽然我无法验证它是否有效，但理论上使用专门用于换行的标签可以修复问题（缩小了重新设计的可能性）。

- Taylor Satula

---

当我插入一个 <br/> 标签时，Safari Reader 由于某种原因无法识别文章。无论如何，我也不能轻易地在每个图像后面放置一个 <br/>：这些文章是通过 Textile 进行标记的，换行符必须由每个作者显式设置。 - fhd

正如 @fhd 已经提到的，它不起作用。此外，添加一个您尚未验证的答案对于该网站及其用户来说并没有太大用处，除非问题是关于理论方法的（正如您所提到的）。 - Canned Man