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上测试过它。

你遇到的问题必须与你对[身体]或[容器]等的任何造型有关。

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

另一件事是，也许firefox对自定义元素不满意，也许你应该把数字和figcaption改成类（只是一个猜测）

Answer 2

完整的主要文章部分如下。还附上了一个屏幕截图，显示了firefox中的问题。

 #main_article 
{
position:relative;
width:auto;
max-width:900px;
margin: 0 auto 20px auto;

 }

#main_article h3 
{
margin:35px 0 0 0;
font-size:25px;
border-bottom: 1px solid #D6D0C1;
padding: 20px 0;
margin-bottom: 20px;
width:auto;
float:left;
max-width:900px;

}

#main_article h4
{
line-height:25px;
width:auto;
float:left;
font-weight:900;
max-width:900px;

}

#main_article p
{
line-height:25px;
width:auto;
float:left;
font-weight:normal;
padding: 5px 0;

}

#main_article p a
{
    text-decoration:none;
color:#00bfff;

}

#main_article p a:hover
{ text-decoration:underline;}