2012-06-08 7 views
5

Ich habe ein Problem mit Google Chrome: 19.0.1084.52 m, wenn ich die Ask Toolbar installiert es bricht das Layout der Website hat.Google Chrome Toolbar brechen Website-Layout

Siehe Druckbild: enter image description here

Ist es üblich, Verhalten, das in Chrome Symbolleiste würde die Website bewirken?

EDIT: Ich denke, ich sollte alles in eine <div> wickeln und das Hintergrundbild von der <body> verschieben, obwohl gibt es eine bessere Option ohne diese zusätzliche Markup hinzufügen?

Website link

+0

ich das nicht denken, wird wegen der Symbolleiste Problem ist bitte Ihre Arbeits jsfiddle Link oder andere Live-Website Link geteilt .. können wir besser verstehen. –

+0

Google Chrome-Symbolleisten funktionieren so, dass dynamische Inhalte mit absoluter Positionierung auf die Seite eingefügt werden. Können Sie einen Link zu dieser Seite bereitstellen? –

+0

Ich bin auch darauf gestoßen! Es machte jedoch ein viel größeres Durcheinander meines Layouts. – Patricia

Antwort

7

Ein Javascript-Snippet kann die Werkzeugleiste in Chrome deaktivieren. Ich hoffe, diese Funktion verbreitet sich schnell !!

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); 
    } 
} 

Rufen Sie diese Methode nach dem Körper onload

<body onload="removeAsk()"> 
1

Es gibt keine Chrome-Erweiterungen API für eine Symbolleiste so genannte Erweiterung zu schaffen muss es über das Content-Skript erstellt haben. Es bedeutet, dass für jede geöffnete Seite CSS- und JavaScript-Dateien von dieser Erweiterung eingefügt werden, um ein DOM-Element innerhalb der Seite zu erstellen, das als Symbolleiste fungiert. Das Problem mit dieser Lösung ist, dass es mit dem Inhaltsskript möglich ist, das Aussehen der Website oder sogar die Art, wie es funktioniert, zu vermasseln.

+0

Was für ein Witz, also werden wir nie in der Lage sein, ein Hintergrundbild zu der 'Körper'-Position hinzuzufügen, ohne alles in ein sinnloses Extra-Div einzuwickeln –

+0

I' Ich bin mir nicht sicher, warum interessieren Sie sich für Menschen, die diese Erweiterung installiert haben? Es gibt wahrscheinlich viele schlecht codierte Chrome-Erweiterungen, die Layouts auf einigen Seiten unterbrechen. Es gibt keine Möglichkeit, eine Website zu erstellen, die vor diesen Erweiterungen geschützt ist. Und es macht keinen Sinn zu versuchen, Ihre Website von vornherein zu schützen. Es ist nicht dein Problem, es ist ein Problem auf der Benutzerseite. –

+0

Die Erweiterungen werden automatisch mit einigen Adobe-Updates unter Windows XP installiert, wenn der Benutzer das Kontrollkästchen nicht deaktiviert und für einige Benutzer schwer zu deinstallieren ist. – Paco

1

Ich lief genau dieses Problem mit der Ask Toolbar. Ich habe grundsätzlich meine Positionierungsattribute und oben/links/rechts/unten herausgenommen und durch Ränder ersetzt. Margin benötigt weniger Platz und es kommt sauberer aus.

Obwohl ich zustimme, ist es irgendwie lächerlich, für eine Symbolleiste zu passen, weil der Endbenutzer alles installiert haben könnte, das bricht und Ihrem Layout Bugs gibt. Sogar Skype-Erweiterungen werden ein Layout unterbrechen, wenn Sie nur die Telefonnummer ändern.

Sie können also nicht viel tun, sondern Margen verwenden und CSS auf ein Minimum reduzieren. Nur meine 2 Cent. und wenn Sie CSS verwenden müssen, bleiben Sie bei den Rändern.