2

我是 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 之间存在这种差异，以及我可以做些什么来解决这个问题，以便图像在两个浏览器上都能很好地显示。首先十分感谢！

4

2 回答 2

1

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

您遇到的问题必须与 [body] 或 [container] 等的任何样式有关。

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

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

于 2013-08-23T13:13:41.153 回答
0

完整的主要文章部分如下。还附上了一个屏幕截图，显示了 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;}
于 2013-08-23T14:00:59.997 回答