Dropdown-Listenbreite im IE

92

Im IE hat die Dropdown-Liste dieselbe Breite wie die Dropbox (ich hoffe, ich mache Sinn), während in Firefox die Breite der Dropdown-Liste je nach Inhalt variiert.

Dies bedeutet im Grunde, dass ich sicherstellen muss, dass die Dropbox breit genug ist, um die längste mögliche Auswahl anzuzeigen. Dadurch sieht meine Seite sehr hässlich aus :(

Gibt es eine Problemumgehung für dieses Problem? Wie kann ich mit CSS unterschiedliche Breiten für Dropbox und Dropdown-Liste festlegen?

javascript html internet-explorer drop-down-menu Nimesh Madhavan
quelle

Antworten:

102

Hier ist ein weiteres jQuery- basiertes Beispiel. Im Gegensatz zu allen anderen hier veröffentlichten Antworten werden alle Tastatur- und Mausereignisse berücksichtigt, insbesondere Klicks:

if (!$.support.leadingWhitespace) { // if IE6/7/8
    $('select.wide')
        .bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
        .bind('click', function() { $(this).toggleClass('clicked'); })
        .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
        .bind('blur', function() { $(this).removeClass('expand clicked'); });
}

Verwenden Sie es in Kombination mit diesem Stück CSS:

select {
    width: 150px; /* Or whatever width you want. */
}
select.expand {
    width: auto;
}

Sie müssen widelediglich die Klasse zu den betreffenden Dropdown-Elementen hinzufügen .

<select class="wide">
    ...
</select>

Hier ist ein jsfiddle-Beispiel . Hoffe das hilft.

BalusC
quelle
2
+1: Von allen hier vorgeschlagenen Lösungen hat dies für mich am besten geklappt. Ich musste auch CSS- und HTML-Änderungen vornehmen, damit es für meinen Fall funktioniert. So viel Arbeit für etwas, das sofort funktionieren sollte.
kgiannakakis
1
Funktioniert mit IE7 nicht in IE6 - Gibt es dafür eine Optimierung für IE6?
DMin
4
@ DMin: Leider unterstützen wir keine alten und veralteten Browser wie IE6.
BalusC
3
@BalusC: :) Ich weiß, mein Freund IE ist scheiße - trotzdem habe ich deine Antwort verwendet, es hat für IE7 funktioniert - habe einen separaten Code für IE6 geschrieben, der deine Antwort + Bindung enthält. ('Mouseenter' .. - hat gut funktioniert - Danke sowieso! :)
DMin
3
Abhängig von Ihren anderen CSS-Regeln - müssen Sie möglicherweise hinzufügen! Wichtig für die Breite ..width: auto !important;
Tapirboy
14

Das Erstellen einer eigenen Dropdown-Liste ist mehr ein Schmerz als es wert ist. Sie können JavaScript verwenden, damit das IE-Dropdown-Menü funktioniert.

Es verwendet einen Teil der YUI-Bibliothek und eine spezielle Erweiterung zum Korrigieren von IE-Auswahlfeldern.

Sie müssen Folgendes einschließen und Ihre <select>Elemente in a einschließen<span class="select-box">

Stellen Sie diese vor das Body-Tag Ihrer Seite:

<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.2-b3.js" type="text/javascript">
</script>
<script src="ie-select-width-fix.js" type="text/javascript">
</script>
<script>
// for each select box you want to affect, apply this:
var s1 = new YAHOO.Hack.FixIESelectWidth( 's1' ); // s1 is the ID of the select box you want to affect
</script>

Nach der Annahme bearbeiten:

Sie können dies auch ohne die YUI-Bibliothek und das Hack-Steuerelement tun. Alles, was Sie wirklich tun müssen, ist ein onmouseover = "this.style.width = 'auto'" onmouseout = "this.style.width = '100px'" (oder was auch immer Sie wollen) auf das select-Element zu setzen. Das YUI-Steuerelement gibt ihm diese nette Animation, aber es ist nicht notwendig. Diese Aufgabe kann auch mit jquery und anderen Bibliotheken ausgeführt werden (obwohl ich hierfür keine explizite Dokumentation gefunden habe).

- Änderung der Bearbeitung:
IE hat ein Problem mit dem Onmouseout für ausgewählte Steuerelemente (Mouseover für Optionen wird nicht als Mouseover für die Auswahl betrachtet). Dies macht die Verwendung eines Mouseouts sehr schwierig. Die erste Lösung ist die beste, die ich bisher gefunden habe.

Schlafentzug Ninja
quelle
3
Ich bekomme eine 404 auf diesen beiden Links
Chris B
Problem mit diesem Fix ist, wenn Sie dynamische Auswahlen haben, beispielsweise in einer E-Commerce-Anwendung für Produktattribute. Sie werden nie die IDs für alle Dropdowns kennen
leen3o
1
Die Links sind nicht mehr 404, sondern zeigen, was ich als böswilligen Spam betrachte. Ich habe über eine Abstimmung nachgedacht, aber ich werde nett sein und nur darauf hinweisen.
Davur
12

Sie könnten einfach Folgendes versuchen ...

  styleClass="someStyleWidth"
  onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}" 
  onblur="this.style.position='';this.style.width=''"

Ich habe es versucht und es funktioniert bei mir. Sonst ist nichts erforderlich.

Sai
quelle
1
Cool, ich habe es ein wenig verbessert (mit bedingten Kommentaren für die IE-Erkennung) und einige Kommentare hinzugefügt, es funktioniert großartig und keine jQuery oder andere Bibliotheken. Siehe hier: jsbin.com/ubahe5/edit - plz BEARBEITEN Sie Ihre Antwort, dass ich Ihnen +1 geben möchte, aber ich kann nicht, weil ich vorher falsch gewählt habe.
Marco Demaio
9

Ich habe die folgende Lösung verwendet und sie scheint in den meisten Situationen gut zu funktionieren.

<style>
select{width:100px}
</style>

<html>
<select onmousedown="if($.browser.msie){this.style.position='absolute';this.style.width='auto'}" onblur="this.style.position='';this.style.width=''">
  <option>One</option>
  <option>Two - A long option that gets cut off in IE</option>
</select>
</html>

Hinweis: Für die Datei $ .browser.msie ist eine Abfrage erforderlich.

Justin Fisher
quelle
Für alle anderen, die sich schläfrig fühlen, sollte das nicht nur schlecht sein - ich brauchte ein paar Momente, um das Problem zu sehen
Shearichard
7

@Das müssen Sie auch einen Unschärfe-Ereignishandler hinzufügen

$(document).ready(function(){
    $("#dropdown").mousedown(function(){
        if($.browser.msie) {
            $(this).css("width","auto");
        }
    });
    $("#dropdown").change(function(){
        if ($.browser.msie) {
            $(this).css("width","175px");
        }
    });
    $("#dropdown").blur(function(){
        if ($.browser.msie) {
            $(this).css("width","175px");
        }
    });
});

Dadurch wird jedoch das Auswahlfeld beim Klicken weiterhin erweitert, anstatt nur die Elemente. (und es scheint in IE6 zu scheitern, funktioniert aber perfekt in Chrome und IE7)

Tinus
quelle
5

In IE6 / IE7 / IE8 ist dies nicht möglich. Das Steuerelement wird von der App gezeichnet und der IE zeichnet es einfach nicht so. Am besten implementieren Sie Ihr eigenes Dropdown-Menü über einfaches HTML / CSS / JavaScript, wenn es so wichtig ist, dass das Dropdown-Menü eine Breite und die Liste eine andere Breite hat.

Robert C. Barth
quelle
Die Lösung lautet: Verwenden Sie Javascript und CSS, um die Breite beim Überfahren mit der Maus (und anderen Tastaturereignissen ...) automatisch anzupassen. Lesen Sie hier: css-tricks.com/select-cuts-off-options-in-ie-fix die beste Lösung (weniger invasiv)
tuffo19
5

Wenn Sie jQuery verwenden, probieren Sie dieses IE Select Plugin Plugin aus:

http://www.jainaewen.com/files/javascript/jquery/ie-select-style/

Durch Anwenden dieses Plugins scheint das Auswahlfeld in Internet Explorer so zu funktionieren, wie es in Firefox, Opera usw. funktionieren würde, indem die Optionselemente in voller Breite geöffnet werden können, ohne das Aussehen und den Stil der festen Breite zu verlieren. Außerdem wird das Auswahlfeld in Internet Explorer 6 und 7 mit Unterstützung für Auffüllen und Rahmen versehen.

Ewen
quelle
4

In jQuery funktioniert dies ziemlich gut. Angenommen, das Dropdown hat id = "dropdown".

$(document).ready(function(){

    $("#dropdown").mousedown(function(){
    if($.browser.msie) {
        $(this).css("width","auto");
    }
    });
    $("#dropdown").change(function(){
    if ($.browser.msie) {
        $(this).css("width","175px");
    }
    });

});
Eran Medan
quelle
3

Hier ist die einfachste Lösung.

Bevor ich anfange, muss ich Ihnen sagen, dass das Dropdown-Auswahlfeld in fast allen Browsern außer IE6 automatisch erweitert wird. Also würde ich eine Browserprüfung durchführen (dh IE6) und das Folgende nur in diesen Browser schreiben. Hier kommt's. Überprüfen Sie zuerst den Browser.

Der Code erweitert das Dropdown-Auswahlfeld auf magische Weise. Das einzige Problem mit der Lösung besteht darin, dass das Dropdown-Menü bei Mauszeiger auf 420 Pixel erweitert wird. Da der Überlauf = ausgeblendet ist, wird die erweiterte Dropdown-Größe ausgeblendet und als 170 Pixel angezeigt. Daher wird der Pfeil auf der rechten Seite der DDL ausgeblendet und kann nicht gesehen werden. Das Auswahlfeld wird jedoch auf 420px erweitert. Das ist es, was wir wirklich wollen. Probieren Sie einfach den folgenden Code aus und verwenden Sie ihn, wenn Sie ihn mögen.

.ctrDropDown
{
    width:420px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
    width:420px; <%-- this the width of the dropdown select box.--%>
}

<div style="width:170px; overflow:hidden;">
<asp:DropDownList runat="server" ID="ddlApplication" onmouseout = "this.className='ctrDropDown';" onmouseover ="this.className='ctrDropDownClick';" class="ctrDropDown" onBlur="this.className='ctrDropDown';" onMouseDown="this.className='ctrDropDownClick';" onChange="this.className='ctrDropDown';"></asp:DropDownList>
</div>

Das obige ist das IE6 CSS. Das gemeinsame CSS für alle anderen Browser sollte wie folgt sein.

.ctrDropDown
{
    width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
    width:auto; <%-- this the width of the dropdown select box.--%>
}
bluwater2001
quelle
2

Wenn Sie ein einfaches Dropdown- und / oder Flyout-Menü ohne Übergangseffekte wünschen, verwenden Sie einfach CSS ... Sie können die Unterstützung von IE6 erzwingen: Bewegen Sie den Mauszeiger über alle Elemente mithilfe einer .htc-Datei (css3hover?) mit dem in definierten Verhalten (nur IE6-Eigenschaft) die bedingt angehängte CSS-Datei.

Nocken
quelle
2

Probieren Sie es aus. Es ist nicht perfekt, aber es funktioniert und es ist nur für den Internet Explorer und hat keinen Einfluss auf FF. Ich habe das reguläre Javascript für onmousedown verwendet, um nur IE-Fix zu etablieren. Aber die msie von jquery kann auch in onmousedown verwendet werden. Die Hauptidee ist "onchange" und on blur, damit das Auswahlfeld wieder normal wird. Entscheide, dass du für diese eigene Breite bist. Ich brauchte 35%.

onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}" 
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"
lucien
quelle
2

Die obige Antwort von BalusC funktioniert hervorragend, aber es gibt eine kleine Korrektur, die ich hinzufügen würde, wenn der Inhalt Ihres Dropdowns eine geringere Breite als die in Ihrem CSS select.expand definierte hat. Fügen Sie dies der Mouseover-Bindung hinzu:

.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
                                if ($(this).width() < 300) // put your desired minwidth here
                                {
                                    $(this).removeClass('expand');
                                }})
jbabey
quelle
2

Dies ist etwas, was ich getan habe, um anderen Leuten etwas abzunehmen.

        $(document).ready(function () {
        if (document.all) {

            $('#<%=cboDisability.ClientID %>').mousedown(function () {
                $('#<%=cboDisability.ClientID %>').css({ 'width': 'auto' });
            });

            $('#<%=cboDisability.ClientID %>').blur(function () {
                $(this).css({ 'width': '208px' });
            });

            $('#<%=cboDisability.ClientID %>').change(function () {
                $('#<%=cboDisability.ClientID %>').css({ 'width': '208px' });
            });

            $('#<%=cboEthnicity.ClientID %>').mousedown(function () {
                $('#<%=cboEthnicity.ClientID %>').css({ 'width': 'auto' });
            });

            $('#<%=cboEthnicity.ClientID %>').blur(function () {
                $(this).css({ 'width': '208px' });
            });

            $('#<%=cboEthnicity.ClientID %>').change(function () {
                $('#<%=cboEthnicity.ClientID %>').css({ 'width': '208px' });
            });

        }
    });

Dabei sind cboEthnicity und cboDisability Dropdowns mit Optionstext, der breiter als die Breite der Auswahl selbst ist.

Wie Sie sehen können, habe ich document.all angegeben, da dies nur im IE funktioniert. Außerdem habe ich die Dropdowns in div-Elementen wie folgt eingeschlossen:

<div id="dvEthnicity" style="width: 208px; overflow: hidden; position: relative; float: right;"><asp:DropDownList CssClass="select" ID="cboEthnicity" runat="server" DataTextField="description" DataValueField="id" Width="200px"></asp:DropDownList></div>

Dies sorgt dafür, dass die anderen Elemente beim Erweitern Ihres Dropdowns nicht mehr richtig platziert werden. Der einzige Nachteil hierbei ist, dass die Menulistenanzeige bei der Auswahl verschwindet, aber zurückkehrt, sobald Sie ausgewählt haben.

Hoffe das hilft jemandem.

Bohrturm
quelle
2

Dies ist der beste Weg, dies zu tun:

select:focus{
    min-width:165px;
    width:auto;
    z-index:9999999999;
    position:absolute;
}

Es ist genau das gleiche wie bei der BalusC-Lösung. Nur das ist einfacher. ;)

mcmwhfy
quelle
Ich habe Ihr CSS erneut getestet und es funktioniert in Chrome und etwas in Firefox, aber nicht in IE8. (Vielleicht ist mein IE8 eine andere Version?) Seitdem habe ich meine eigene js-basierte Lösung entwickelt. Siehe tahirhassan.blogspot.co.uk/2013/02/…
Tahir Hassan
Ein bisschen in IE8 damit zu spielen und ein Tweak später hat es geholfen. Ich musste nur das übergeordnete <td> auf eine feste Breite setzen, den oberen Wert neu positionieren und ¡ahí estuvo!. Danke
j4v1
2

Ein vollwertiges jQuery-Plugin ist verfügbar. Es unterstützt unterbrechungsfreie Layout- und Tastaturinteraktionen. Weitere Informationen finden Sie auf der Demoseite: http://powerkiki.github.com/ie_expand_select_width/

Haftungsausschluss: Ich habe das Ding codiert, Patches sind willkommen

PowerKiKi
quelle
1

Die Lösung von jquery BalusC wurde von mir verbessert. Wird auch verwendet: Brad Robertsons Kommentar hier .

Fügen Sie dies einfach in eine .js-Datei ein, verwenden Sie die breite Klasse für Ihre gewünschten Combos und geben Sie ihr keine ID. Rufen Sie die Funktion im Onload (oder documentReady oder was auch immer) auf.
So einfach ist das :)
Es wird die Breite, die Sie für die Combo definiert haben, als minimale Länge verwenden.

function fixIeCombos() {
    if ($.browser.msie && $.browser.version < 9) {
    var style = $('<style>select.expand { width: auto; }</style>');
    $('html > head').append(style);

    var defaultWidth = "200";

    // get predefined combo's widths.
    var widths = new Array();
    $('select.wide').each(function() {
        var width = $(this).width();
        if (!width) {
        width = defaultWidth;
        }
        widths[$(this).attr('id')] = width;
    });

    $('select.wide')
    .bind('focus mouseover', function() {
        // We're going to do the expansion only if the resultant size is bigger
        // than the original size of the combo.
        // In order to find out the resultant size, we first clon the combo as
        // a hidden element, add to the dom, and then test the width.
        var originalWidth = widths[$(this).attr('id')];

        var $selectClone = $(this).clone();
        $selectClone.addClass('expand').hide();
        $(this).after( $selectClone );
        var expandedWidth = $selectClone.width()
        $selectClone.remove();
        if (expandedWidth > originalWidth) {
        $(this).addClass('expand').removeClass('clicked');
        }
    })
    .bind('click', function() {
        $(this).toggleClass('clicked'); 
    })
    .bind('mouseout', function() {
        if (!$(this).hasClass('clicked')) {
        $(this).removeClass('expand');
        }
    })
    .bind('blur', function() {
        $(this).removeClass('expand clicked');
    })
    }
}
Federico Valido
quelle
0

Sie können dem ausgewählten Element direkt einen Stil hinzufügen:

<select name="foo" style="width: 200px">

Dieses ausgewählte Element ist also 200 Pixel breit.

Alternativ können Sie eine Klasse oder ID auf das Element anwenden und in einem Stylesheet darauf verweisen

Katy
quelle
0

Bisher gibt es keinen. Sie kennen IE8 nicht, können es jedoch nicht in IE6 und IE7 ausführen, es sei denn, Sie implementieren Ihre eigene Dropdown-Listenfunktion mit Javascript. Es gibt Beispiele, wie dies im Web gemacht wird, obwohl ich keinen großen Vorteil darin sehe, vorhandene Funktionen zu duplizieren.

pilsetnieks
quelle
0

Wir haben das gleiche auf einer asp: Dropdown-Liste:

In Firefox (3.0.5) ist die Dropdown-Liste die Breite des längsten Elements in der Dropdown-Liste, die etwa 600 Pixel breit ist oder so ähnlich.


quelle
0

Dies scheint mit IE6 zu funktionieren und andere nicht zu beschädigen. Die andere nette Sache ist, dass es das Menü automatisch ändert, sobald Sie Ihre Dropdown-Auswahl ändern.

$(document).ready(function(){
    $("#dropdown").mouseover(function(){
        if($.browser.msie) {
            $(this).css("width","auto");
        }
    });
    $("#dropdown").change(function(){
        if ($.browser.msie) {
            $("#dropdown").trigger("mouseover");
        }
    });

});
lhoess
quelle
0

Der Hedgerwow-Link (die Umgehung der YUI-Animation) in der ersten besten Antwort ist defekt. Ich denke, die Domain ist abgelaufen. Ich habe den Code kopiert, bevor er abgelaufen ist, sodass Sie ihn hier finden können (der Inhaber des Codes kann mich informieren, wenn ich gegen Urheberrechte verstoße, indem ich ihn erneut hochlade).

http://ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-problem/

Im selben Blog-Beitrag schrieb ich über das Erstellen eines exakt gleichen SELECT-Elements wie das normale Element mithilfe des YUI-Schaltflächenmenüs. Schauen Sie mal rein und lassen Sie mich wissen, ob das hilft!

Hammad Tariq
quelle
0

Basierend auf der von Sai veröffentlichten Lösung wird dies mit jQuery so gemacht.

$(document).ready(function() {
    if ($.browser.msie) $('select.wide')
        .bind('onmousedown', function() { $(this).css({position:'absolute',width:'auto'}); })
        .bind('blur', function() { $(this).css({position:'static',width:''}); });
});
Ahmad Alfy
quelle
0

Ich dachte, ich würde meinen Hut in den Ring werfen. Ich mache eine SaaS-Anwendung und habe ein Auswahlmenü in eine Tabelle eingebettet. Diese Methode hat funktioniert, aber alles in der Tabelle verzerrt.

onmousedown="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}
onblur="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position=''; this.style.width= '225px';}"

Was ich getan habe, um alles besser zu machen, war, die Auswahl in ein Z-indiziertes Div zu werfen.

<td valign="top" style="width:225px; overflow:hidden;">
    <div style="position: absolute; z-index: 5;" onmousedown="var select = document.getElementById('select'); if(navigator.appName=='Microsoft Internet Explorer'){select.style.position='absolute';select.style.width='auto'}">
        <select name="select_name" id="select" style="width: 225px;" onblur="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position=''; this.style.width= '225px';}" onChange="reportFormValues('filter_<?=$job_id?>','form_values')">
            <option value="0">All</option>
            <!--More Options-->
        </select>
    </div>
</td>
n0nag0n
quelle
0

Es ist in allen Versionen von IE, Chrome, FF & Safari getestet

// JavaScript-Code

<script type="text/javascript">
<!-- begin hiding
function expandSELECT(sel) {
  sel.style.width = '';
}
function contractSELECT(sel) {
  sel.style.width = '100px';
}
// end hiding -->
</script>

// HTML Quelltext

<select name="sideeffect" id="sideeffect"  style="width:100px;" onfocus="expandSELECT(this);" onblur="contractSELECT(this);" >
  <option value="0" selected="selected" readonly="readonly">Select</option>
<option value="1" >Apple</option>
<option value="2" >Orange + Banana + Grapes</option>
Arif
quelle
0

Ich musste dieses Problem umgehen und hatte einmal eine ziemlich vollständige und skalierbare Lösung für IE6, 7 und 8 (und natürlich kompatibel mit anderen Browsern). Ich habe hier einen ganzen Artikel darüber geschrieben: http://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-explorer

Ich dachte, ich würde dies für Leute teilen, die immer noch auf dieses Problem stoßen, da keine der oben genannten Lösungen in jedem Fall funktioniert (meiner Meinung nach).

Aerendel
quelle
0

Ich habe alle diese Lösungen ausprobiert und keine hat vollständig für mich funktioniert. Das habe ich mir ausgedacht

$(document).ready(function () {

var clicknum = 0;

$('.dropdown').click(
        function() {
            clicknum++;
            if (clicknum == 2) {
                clicknum = 0;
                $(this).css('position', '');
                $(this).css('width', '');
            }
        }).blur(
        function() {
            $(this).css('position', '');
            $(this).css('width', '');
            clicknum = 0;
        }).focus(
        function() {
            $(this).css('position', 'relative');
            $(this).css('width', 'auto');
        }).mousedown(
        function() {
            $(this).css('position', 'relative');
            $(this).css('width', 'auto');
        });
})(jQuery);

Stellen Sie sicher, dass Sie jedem Dropdown-Menü in Ihrem HTML-Code eine Dropdown-Klasse hinzufügen

Der Trick hier ist die Verwendung der speziellen Klickfunktion (ich habe sie hier gefunden. Jedes Mal, wenn ein DropDownList-Element mit jQuery ausgewählt wird, wird ein Ereignis ausgelöst ). Viele der anderen hier beschriebenen Lösungen verwenden die Änderung des Ereignishandlers, die gut funktioniert, jedoch nicht ausgelöst wird, wenn der Benutzer dieselbe Option wie zuvor auswählt.

Wie bei vielen anderen Lösungen ist Fokus und Mousedown für den Fall gedacht, dass der Benutzer das Dropdown-Menü in den Fokus stellt. Unschärfe gilt für den Fall, dass er wegklickt.

Möglicherweise möchten Sie auch eine Art Browsererkennung darin einfügen, damit dies nur Auswirkungen hat, z. In anderen Browsern sieht es allerdings nicht schlecht aus

RasTheDestroyer
quelle