html - 图像在 Firefox 中完全不对齐，但在 Chrome 中没有

Question

我是 HTML/CSS 的新手，一直在通过编辑具有 HTML 5 响应功能的现有模板来开发网站。我的工作流程包括在代码和 Chrome 浏览器之间来回检查。

在我完成网站并对结果感到满意之后，我检查了一切在 Firefox 和 Safari 中的显示情况。

令我震惊的是，我突然发现在 Firefox 中，有几个页面上的图像与浏览器的最右侧完全不对齐(严重到我不得不使用水平滚动条才能看到图片完整)。在整个开发过程中，我对 Chrome 没有这样的问题。

不过，后来我发现该网站在iPad上的Chrome和Safari中也出现了更多轻微的图片显示错误。

到目前为止，我已经浏览了该站点上的问题，还运行了 w3 在线 html 和 css 验证器。这些都没有用。

下面我提供了受影响图像之一的 html 和下面的相关 css。

<figure>
   <img src="img/image.jpg" alt="Some text">
   <figcaption>Some Text
   </br>
   (Photo credit: Daniel Easterman)
  </figcaption>
</figure>


#main_article img
{

display: block; 
border: 0; 
max-width: 100%;
height: auto;
padding: 20px 0;
border-bottom: 1px solid #D6D0C1;
}

#main_article figcaption
{
line-height: 25px;
font-size:14px;
max-width:900px;
width:auto;
}

我希望有人能帮我弄清楚为什么 chrome 和 firefox 之间存在这种差异，以及我可以做些什么来解决这个问题，以便图像在两种浏览器上都能很好地显示。非常感谢!

Answer 1

我查看了您的代码，没有发现任何错误。甚至在 jsFiddle 上对其进行了测试。

您遇到的问题一定与您为 [body] 或 [container] 等设置的任何样式有关。

基本上，您可能希望提供更大的图片以便我们提供帮助。也许与我们分享整个样式表，或者任何相关的东西，也许是#main_article？

另一件事，也许 firefox 对自定义元素不满意，也许你应该将 figure 和 figcaption 改为类(只是猜测)