不同浏览器的布局问题

Question

我有一个网站，与FireFox（桌面和Android版本）完全一致。但当我切换到另一个浏览器时，问题仍然存在。查看我的主页：

http://pichak-gallery.com

标题很好地放在firefox中，但是当你用chrome打开页面时，标题就不在它的位置。所以我必须补充一点：

margin-top:-16px

但这会打破firefox中的网站。我甚至不说网站在IE中完全被破坏了。

另一个问题属于Google + 1按钮。在Chrome中没有显示，直到你按下F12并打开检查元素，然后按钮就会显示出来。

例如在此页面中：

http://pichak-gallery.com/index.php/7-maincategory/5-gallery.html

会发生这种情况：

我在代码上工作了很长时间，以调查问题。但我在代码中找不到任何问题。

还有其他人经历过这些吗？是否有代码或脚本可以解决这些问题？

Answer 1

我在FF中查看网页来源时注意到的一件事是，您有script标记，如此处所示（红色），head和body标记之间。< / p>

所以，我猜这就是为什么你在Chrome中获得这种渲染布局的问题

您的所有link和script代码都会以某种方式进入body，并且您拥有empty“div”。我在检查器中删除该节点的那一刻，问题就消失了。因此，请尝试删除<script type="text/javascript"> ; </script>或将其移至head。

Answer 2

好吧，现在我明白了。

第一个问题是因为java模板中的几行。从：

开始

<?php
defined('_JEXEC') or die;

JHtml::_('behavior.framework', true);

$app = JFactory::getApplication();
?>

据我所知这些线是出于某些安全原因，我并不认为它们会对布局产生任何影响，因为它们不会回应任何东西。

第二个问题是关于我添加到我的CSS中的自定义行。我手动覆盖了带有！important标签的google + 1按钮的原始样式，这使得某些浏览器出现问题。我必须在DIV中放入g + 1按钮，然后将这些样式添加到提到的DIV中。