logo标签列表

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

cssgoogle-chromewebgoogle-chrome-extension
5
我有一个关于Google Chrome的问题：版本号为19.0.1084.52 m，当我安装Ask Toolbar时，会破坏网站布局。
请看截图： enter image description here Chrome中的工具栏是否会影响网站是正常行为吗？
编辑：我想我应该将所有内容包装在<div>中，并将背景图像从<body>中移动，但是有没有更好的选择而不添加这个额外的标记？ 网站链接
我不认为这是由于工具栏问题，请分享您的工作 jsfiddle 链接或任何其他实时网站链接…我们可以更好地理解。 - CSS Guy
我们也遇到了这个问题 - 在相对定位的容器内绝对定位的元素在 Ask 工具栏激活时突然偏离了它们原本的位置。 - And Finally
@AndFinally 将所有内容包裹在一个 div 包装器中，这对我有用。 - John Magnolia
谢谢 John - 你的意思是围绕整个内容添加一个相对定位的包装 div 吗？ - And Finally
是的，从我记得的来看，Ask被附加到了主体上。 - John Magnolia
显示剩余2条评论
3个回答
7
一个JavaScript代码片段可以在Chrome浏览器中禁用Ask工具栏。希望这个函数能够快速传播！
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="removeAsk()">
1
我在使用 Ask 工具栏时遇到了完全相同的问题。我基本上删除了我的定位属性和 top/left/right/bottom，并用边距代替。边距使用更少的空间，效果更清晰。
虽然我同意，为工具栏做适配有点荒谬，因为最终用户可能安装了任何破坏并导致布局错误的东西。即使是 Skype 扩展也会改变电话号码而破坏布局。
所以你能做的不多，只能使用边距并尽量减少 CSS 的使用。这只是我的个人看法。如果必须使用 CSS，请坚持使用边距。
1

Chrome没有提供创建工具栏的扩展API，因此所提到的扩展必须通过内容脚本来创建它。这意味着对于您打开的每个页面，该扩展都会注入CSS和JavaScript文件，以创建一个DOM元素，作为页面内的工具栏。使用内容脚本的问题在于可能会破坏网站的外观甚至影响其功能。

真是个笑话，所以我们永远无法在body位置顶部添加背景图片，而不用将所有内容都包裹在一个毫无意义的额外div中。 - John Magnolia
我不确定你为什么关心那些安装了这个扩展的人。可能有很多编码不良的Chrome扩展会破坏某些页面的布局。没有办法创建一个受保护免受这些扩展影响的网站。而且，试图保护你的网站免受此类影响是没有意义的。这不是你的问题，而是用户端的问题。 - Konrad Dzwinel
当用户没有关闭复选框时，某些Adobe更新会自动安装扩展程序在Windows XP上，并且对于一些人来说很难卸载。 - Paco
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接