谷歌浏览器工具栏破坏网站布局

Posted

技术标签:

【中文标题】谷歌浏览器工具栏破坏网站布局【英文标题】:Google Chrome Toolbar breaking website layout 【发布时间】:2012-06-12 08:18:15 【问题描述】:

当我安装了Ask Toolbar 时,我遇到了 Google Chrome 问题:19.0.1084.52 m 它破坏了网站布局。

查看打印屏幕:

Chrome 中的工具栏是否会影响网站?

编辑:我想我应该将所有内容包装在 <div> 中并从 <body> 中移动背景图像,尽管有没有更好的选择而不添加这个额外的标记?

Website link

【问题讨论】:

我不认为这是因为工具栏问题,请分享您的工作 jsfiddle 链接或任何其他实时网站链接。我们可以更好地理解。 Google Chrome 工具栏的工作方式是在页面上包含具有绝对定位的动态内容。你能提供该页面的链接吗? 我也遇到过这个!不过,这让我的布局变得更加混乱。 我们也遇到了这个问题 - 当“询问”工具栏处于活动状态时,绝对定位在相对定位容器内的元素会突然被抛出其正确位置。 @AndFinally 将所有内容包装在 div 包装器中为我解决了这个问题 【参考方案1】:

javascript sn-p 可以禁用 chrome 中的询问工具栏。希望这个功能快点普及!!

function removeAsk()
    if(document.getElementById("apn-null-toolbar") != null)
        // mainMenu had a style change for its top positioning, returning it to normal
        // perhaps a function can be made which iterates over every element ask has changed
        document.getElementById("mainMenu").style.top = "-16px";
        // Just remove the iframe and style elements
        (elem=document.getElementById("apn-null-toolbar")).parentNode.removeChild(elem);
        (elem=document.getElementById("apn-body-style")).parentNode.removeChild(elem);
    

body onload 后调用此方法

<body onload="removeAsk()">

【讨论】:

【参考方案2】:

我在使用“询问工具栏”时遇到了完全相同的问题。我基本上取出了我的定位属性和 top/left/right/bottom 并替换为边距。边距使用的空间更少,而且更干净。

虽然我同意,但容纳工具栏有点荒谬,因为最终用户可能安装了任何会破坏并给您的布局错误的东西。即使是 Skype 扩展程序也会破坏仅更改电话号码的布局。

所以你可以做的不多,但使用边距并将 CSS 保持在最低限度。只是我的2美分。如果您必须使用 CSS,请坚持使用边距。

【讨论】:

【参考方案3】:

没有用于创建工具栏的 Chrome 扩展 API,因此提到的扩展必须是通过内容脚本创建的。这意味着对于您打开的每个页面,此扩展程序都会注入 CSS 和 JavaScript 文件,以在页面内创建一个充当工具栏的 DOM 元素。这个解决方案的问题在于,使用内容脚本可能会弄乱网站的外观甚至是它的工作方式。

【讨论】:

开个玩笑,所以我们永远无法将背景图像添加到 body 位置顶部,除非将所有内容都包装在一个毫无意义的额外 div 中 我不知道你为什么关心安装了这个扩展的人?可能有很多编码不佳的 Chrome 扩展程序会破坏某些页面上的布局。无法创建不受这些扩展保护的网站。首先尝试保护您的网站不受此影响是没有意义的。这不是你的问题,这是用户方面的问题。 当用户不关闭复选框并且某些人难以卸载时,Windows XP 上的一些 Adob​​e 更新会自动安装扩展。

以上是关于谷歌浏览器工具栏破坏网站布局的主要内容,如果未能解决你的问题,请参考以下文章

开发工具|谷歌插件

苹果电脑上怎么打开谷歌浏览器的控制台?

怎么用代理网站上谷歌

异步加载css 和 谷歌浏览器各实用小工具介绍

谷歌浏览器网页不能播放音乐,显示没有用于显示此内容的插件

如何在不破坏浏览器的情况下导入大量Wordpress帖子?