2014-04-20 15 views
11

Ich arbeite an einem Layout, das präzise Medienabfrage erfordert. Eines meiner Probleme ist der Crossbrowser Bildlaufleiste Breite wie es ist je nach Browsern und die meisten (alle von ihnen?) Enthalten es in der Fensterbreite.Medienabfragen und Bildlaufleistenbreite

Wie wir in diesen zwei Beispielen sehen können, die Medien-Abfragen mit der gleichen Fenstergröße handeln nicht mit und ohne vertikale Bildlaufleiste:

  1. Test without scrollbar
  2. Test with scrollbar

In Im ersten Beispiel können Sie die Hintergrundfarbe genau unter 800/700/600px Fensterbreite ändern.
In den zweiten Beispielen mit dem Scrollbar die Farben zu ändern:

  • Chrome und Firefox: 779/679/579px
  • IE: 783/783/583px

, die einen Unterschied von bis zu 21px macht.

Gibt es eine Arbeit, indem Sie die Bildlaufleiste in Medienabfragen ignorieren und auf die verfügbare Breite selbst konzentrieren.
Wenn nicht, wie Sie dieses Problem behandeln, beheben Sie eine maximale Breite für die Scollbar und fügen Sie sie in die Medienabfragen ein?

- UPDATE -

Ich suche Best Practices/Lösung mit CSS wie ich JS möchte für dieses Projekt vermeiden.

+0

Sein Aussehen ähnlich wie andere Aufgabe. Versuchen Sie diese: [http://stackoverflow.com/questions/15976531/dealing-with-scroll-bars-and-jquery-width-method] [1]: http://stackoverflow.com/questions/15976531/Umgang mit Scroll-Bars-und-jquery-Breite-Methode – Petroff

+0

@Nividim Ich hatte diese Frage gesehen, aber die Antwort passt nicht meine Bedürfnisse, ich bin auf der Suche nach einer CSS-Lösung. –

+0

@ web-tiki, meine Antwort hat dir geholfen? irgendwelche Kommentare? es wird nicht akzeptiert, lassen Sie mich wissen, wenn etwas falsch ist, bitte, ich werde versuchen, zusätzliche Informationen hinzuzufügen oder zu erklären. –

Antwort