不同浏览器的布局问题答案

【问题标题】：layout issue with different browsers不同浏览器的布局问题
【发布时间】：2014-08-17 08:54:15
【问题描述】：

我有一个网站，它与 FireFox（桌面版和安卓版）完全兼容。但是当我切换到另一个浏览器时，问题不断出现。查看我的主页：

标题在Firefox中放置得很好，但是当您在chrome中打开页面时，标题不在其位置。所以我必须添加这个：

margin-top:-16px

但这会破坏 Firefox 中的网站。我什至没有说该网站在 IE 中完全崩溃。

另一个问题属于 Google+1 按钮。不会出现在 chrome 中，直到你按 F12 并打开检查元素，然后按钮才会显示出来。

例如在这个页面中：

这会发生：

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

有其他人经历过这些吗？是否有能够修复这些问题的代码或脚本？

【问题讨论】：

【解决方案1】：

我在 FF 中查看页面源代码时注意到的一件事是，您在head 和body 标记之间有一个不正确的script 标记，如图所示（红色）。

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

你所有的link 和script 标签都进入了body，而你有empty“div”。我在检查器中删除该节点的那一刻，问题就消失了。因此，请尝试擦除 <script type="text/javascript"> ; </script> 或将其移入 head。

【讨论】：

tnx 你花在这上面的时间。但你到底删除了什么？我几乎删除了页面上的整个节点，但什么也没发生。而且我找不到空 div... 必须由 java 脚本生成。
检查第二张图像（检查器中以蓝色标记的空白区域）。我猜它是以这种方式生成的，因为图 1 中显示的 script 标记不正确（标记为红色）。
我完全删除了那个脚本......但仍然有一个空的“”甚至无法删除。您可以再次检查该网站...看看它已被删除。
是的，我看不出更多关于 html/css 的缺陷。您是否正在通过 JS 创建/插入一些元素？你能告诉我们JS代码吗？我很确定这是一个用户，而不是浏览器错误。
好吧，我没有使用您在页面源代码中看到的任何其他代码。但是，我尝试删除除标题、正文和主 div 之外的每个元素。我仍然有同样的问题......只有 2 个元素并且无法正确设置它 XD ！很奇怪。

【解决方案2】：

好的，我明白了。

第一个问题是由于 java 模板中的几行。开头：

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

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

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

据我所知，这些行是出于某些安全原因，我认为它们不会对布局产生任何影响，因为它们不会回显任何内容。

第二个问题是关于我添加到我的 css 中的自定义行。我用 !important 标签手动覆盖了 google+1 按钮的原始样式，这对某些浏览器造成了问题。我必须将 g+1 按钮放在 DIV 中，然后将这些样式添加到提到的 DIV。

【讨论】：