CSS - 火狐给completley不同的解释Chrome浏览器/ Safari浏览器

嗨我不知所措到我真的为什么Firefox是渲染我的网页这样错误CSS - 火狐给completley不同的解释Chrome浏览器/ Safari浏览器

Link to problem page（不活还）

在Chrome和Safari，它的工作原理应该如此。另外，HTML验证，没有jQuery的错误。通常FF并不遥远。但是，是的，框架的处理非常复杂。我嵌套了很多的div，并利用

显示：表

和

显示：表细胞

性能。图像的大小也都是以父母为基础的。它基本上是一个超级流体居中的布局，图像大小额外的奖励也是流体了（我在这里尝试新的东西，所以也许它服务我）

我猜测并希望有可能只有一个，Firefox并没有以相同的方式解释这个愚蠢的东西。希望有人能为我揭开一些光。非常感谢

来源

2011-03-29 RGBK

哎呀！这是完全不同的。 – Dutchie432 2011-03-29 20:25:04

奇怪吗？这是那些我不知道从哪里开始寻找问题的机构之一！特别是当html验证并且没有脚本错误时。 – RGBK 2011-03-29 20:27:36

修正：http：//www.joshuacarmody.com/temp/Tom%20Darracott.htm。请参阅下面的答案，了解为什么这会起作用。 – 2011-03-29 21:02:06

我试了一下你的代码，好像Firefox不支持position: relative与display: table-cell或display: table的组合。因此，您的定位上下文没有被重置，绝对定位的图像相对于窗口的宽度而不是其容器的宽度被缩放。我改变了这个...

<div class="imgContainer"> 
    <div class="thumbnail"><img width="100%" height="auto" alt="image" src="images/2.png"></div> 
    <!-- Snip --> 
</div>

...这个...

<div class="imgContainer"> 
    <div style="position: relative;"> 
     <div class="thumbnail"><img width="100%" height="auto" alt="image" src="images/2.png"></div> 
     <!-- Snip --> 
    </div> 
</div>

...并开始期待了很多更像Chrome版本。基本上，您需要在表格单元格和绝对定位的缩略图之间使用position: relative的中间格来重置定位上下文。至少，这是巨大图像的原因。

编辑：

在这里，我fixed it for you。如果使用此源文件，请确保删除标头中的<BASE>标签。

来源

2011-03-29 20:49:59

不能，谢谢你，完全解决它。我确信有那么一点东西可以解决它。干杯! – RGBK 2011-03-29 21:07:14

@RGBK - 我的荣幸！ – 2011-03-29 21:09:28

你为什么不使用表格呢？使用表格来布局你的网站结构是不好的。为了您的目的，这正是设计的目的。

它也看起来像你在你的html中使用内联样式。你为什么不使用样式表和类？我想我们在回答你最后一个问题时清楚了这一点？

来源

2011-03-29 20:32:51

是的妈妈。对不起母亲。 – Sam 2011-03-29 20:36:59

嗯，可以尝试...但css ...多数民众赞成在CSS文件？！（对不起生气的猫！） – RGBK 2011-03-29 20:44:03

@RGBK，我不确定你从哪里生气，我不是故意让它听起来那样。如果你在谈论我的最后一句话，我记得给你一个链接到雅虎开发者最佳实践页面，并想知道为什么看完它后，你仍然在写内联CSS。 – 2011-03-29 21:03:13

那么... .tableMaker > .imgContainer > .thumbnail宽度为100％是部分罪魁祸首，在我看来。将它们切换到设定值，而不是百分比。（这种风格是在HTML中，而不是css，fyi）

来源

2011-03-29 20:37:04

对不起，这是什么风格是HTML不是CSS？同意它必须是这100％的东西。但是，如果它在webkit中起作用，它应该可以工作。格儿。将继续在它。 – RGBK 2011-03-29 20:42:14

@Philip Sheard我不同意。使用CSS，他可以将它们以任何格式显式放置，而不仅仅是列和行。他只是过度复杂的CSS，并没有完全理解他在做什么。 – 2011-03-29 20:48:59

@RGBK我只是说你在你的html代码中将宽度设置为100％，比如''，而我并不是指CSS样式。我写了那条语句是因为我使用了一个选择器语法，用来阐明我所说的元素。 – 2011-03-29 20:50:34

由于某些原因，firefox在图像的100％值上窒息，如下所示：<img width="100%"如果您明确设置此值，它似乎工作。

来源

2011-03-29 20:38:21 Sam

由于idealogical的原因，您正在使用CSS。任何明智的人都会使用一张桌子。

来源

2011-03-29 20:42:09

大声笑......你是如此的正确。好吧，我要制作一些表格。 BRB – RGBK 2011-03-29 20:45:21

嗯，虽然我采取了回...改变浏览器窗口的大小，divs浮动左和展开在jquery中设置的某些浏览器大小标记，我不认为我可以做到这一点与表对吗？这就是为什么我最初去div。如果我对此功能有误，请纠正我，欢呼。 – RGBK 2011-03-29 20:52:33

CSS - 火狐给completley不同的解释Chrome浏览器/ Safari浏览器

回答

相关问题