CSS3 background-position Problem mit Safari nur

Der folgende Code macht auch in IE9, FireFox, Chrome, aber nicht in Safari:CSS3 background-position Problem mit Safari nur

.search-choice 
{ 
    position: relative; 
    background-clip : padding-box; 
    background-image: url('../Design/icon_chosen_close.gif'); 
    background-repeat: no-repeat; 
    background-position: top 6px right 6px; 
} 

<ul class="chzn-choices"> 
    <li class="search-choice" id="selLVB_chzn_c_0"> 
     <span>multi1</span><a href=# class="search-choice-close" rel="0"></a> 
    </li> 
</ul>

Safari nicht die background-position zu berücksichtigen scheint. Ich habe eine Reihe von Varianten ausprobiert (wie background-position-x: right 6px), aber nichts scheint zu funktionieren. Ich kann das Hintergrundbild in Safari nur von der oberen rechten Ecke aus verschieben.

Irgendwelche Ideen? Vielen Dank für Ihre Zeit!

Quelle

2013-05-14 Vlad

Ich denke, das 'top 6px rechts 6px' ist kein gültiger Wert –

Also, was soll der gültige Wert sein? Es funktioniert perfekt in allen anderen Browsern .. – Vlad

Probieren Sie zum Beispiel 'background-position: 6px 6px;' und sehen Sie, ob es funktioniert –

Es gibt einen Bug offen ist in Safari Implementierung rund um die Lang Hand Syntax von background-position: https://bugs.webkit.org/show_bug.cgi?id=37514

Meine Lösung für dieses auch background-position: top right; in Kombination mit der rechten Polsterung und background-origin: content-box;

Es kann zu verwenden, war In einigen Szenarien ist es sinnvoll, anstelle eines Hintergrundbilds ein Pseudoelement zu verwenden und dieses wie im Hintergrund zu positionieren.

Quelle

2013-06-17 16:59:46 Ansikt

es funktioniert in Safari, aber die Polsterung einzustellen (zB von oben), nur um die Hintergrundposition zu setzen, ist nicht immer das, was du willst. – Vlad

Das Einstellen der Polsterung mag nicht das sein, was du willst, aber soweit ich sehen kann, ist dies der nächste, der dir begegnet Frage, und es erfüllt tatsächlich Ihre Anforderungen, wie in Ihrem ursprünglichen Beitrag dargelegt. Ich denke, das sollte als die richtige Antwort markiert werden. – Luke

Es ist erwähnenswert, dass man ** - webkit-background-origin: content; **, ** - moz-background-origin: content; ** und ** background-origin: content-box; **, und ich musste **! wichtig ** auf all den oben genannten verwenden, um es für mich zu arbeiten, aber trotzdem eine großartige Lösung. – Luke

Fand heraus, dass Safari die folgende Zeile als ungültig und das Hintergrundbild markiert werden nicht angezeigt:

background-position: top 15px right 0px;

Aber wenn ich nur Typ:

background-position: top right;

Safari erzeugt selbst die folgende :

background-position-x: 100%; 
background-position-y: 0%;

dann herausgefunden, dass Firefox völlig ignoriert:

background-position-x: 100%; 
background-position-y: 0%;

So endlich habe ich es mit:

background: url(../images/image.png) no-repeat; 
background-position: top 15px right 0px; 
background-position-x: 120%; 
background-position-y: 0%;

Während Safari ignoriert die zweite Zeile, ignoriert Firefox die letzten beiden Zeilen.

Dieser Tweak scheint auch in älteren Internet Explorer zu funktionieren. Getestet in IE8.

Quelle

2013-08-19 18:28:05 leymannx

Es funktioniert für mich, danke! – Oleg

Arbeitete auch mit mir! Vielen Dank ! –

Funktioniert immer noch in Firefox 24 und Safari 6.0.5 auf OSX – k0nG

Wenn Sie die richtige Position nur von rechts und von oben einstellen können, können Sie es immer noch in der alten Schule machen.

background:url("../images/") no-repeat Xpx Ypx;

Dabei steht X für die Breite von links und Y für die Höhe von oben.

Quelle

2013-10-23 17:21:26

nutzlos für die richtige Positionierung, wenn Sie die Breite/Höhe des Elements nicht kennen. – Vlad

-1

Ich hatte ein ähnliches Problem, wenn ich ein <a> -Tag ein Hintergrundbild gab. Um es zu geben display: inline-block; löste das Problem für mich.

Quelle

2015-09-09 12:39:35 SoBiT

-3

beste Weg ist, zu verwenden:

background-size: auto;

Quelle

2016-03-07 11:29:20 krithika

CSS3 background-position Problem mit Safari nur

Antwort

Verwandte Themen