Flex-Eigenschaft funktioniert nicht in Safari-Browser

.rq-search-container { 
    position: relative; 
    width: 100%; 
    background: white; 
    display: flex; 
    flex-direction: row; 
    align-items: flex-start; 
    border-radius: 2px; 
    z-index: 30; 
    -webkit-flex: 1 0 15em; 
    }

Es funktioniert perfekt mit Chrome, Mozilla-Browser, funktioniert aber nicht in Safari-Browser.Flex-Eigenschaft funktioniert nicht in Safari-Browser

Ich habe schon viele Möglichkeiten wie -web-kit-flex usw. ausprobiert aber funktioniert nicht. bitte schlagen Sie mir vor!

Quelle

2017-07-04 Prasanna Raja

hinzufügen Versuchen 'Anzeige: -webkit-flex' – duan

Anbieter Präfixe CSS-Eigenschaften sollte über den Standard-CSS-Eigenschaften geschrieben werden. –

Wenn Sie CSS täglich schreiben, ist [Autoprefixer] (https://github.com/postcss/autoprefixer) ein Muss (mit einer Browserslist-Konfiguration). Sie müssen sich nicht um diese Präfixe kümmern und werden nicht _able_ sein, um einen zu vergessen (oder fügen Sie einen hinzu, der nicht notwendig ist oder der nie existiert hat), schreiben in einer nicht funktionalen Reihenfolge, müssen manuell entfernen, wenn Sie nicht unterstützen einige (jetzt) alte Browser, etc. Benötigt einige Werkzeuge, aber es gibt einen Grund, warum es von so vielen Entwicklern verwendet wird ^^ – FelipeAls

Versuchen Sie, diese Art display:-webkit-flex

in ähnlicher Weise für alle Browser Verwendung unter css

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ 
display: -ms-flexbox; /* TWEENER - IE 10 */ 
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ 
display: flex;   /* NEW, Spec - Firefox, Chrome, Opera */

Ihr Code

.rq-search-container { 

position: relative; 
width: 100%; 
background: #fff; 
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ 
display: -ms-flexbox; /* TWEENER - IE 10 */ 
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ 
display: flex;   /* NEW, Spec - Firefox, Chrome, Opera */ 
flex-direction: row; 
align-items: flex-start; 
border-radius: 2px; 
/*box-shadow: 0px 0px 28px 5px rgba(0, 0, 0, 0.3); margin-top: 45px;*/ 
z-index: 30; 

}

Quelle

2017-07-04 06:21:32

Hallo Dinesh, ich wurde versucht, diesen Code, aber es nicht zu reflektieren! –

können Sie bitte aktualisierte Stile posten? @PrasannaRaja –

Position: relativ; Breite: 100%; Hintergrund: #fff; Anzeige: flex; Flex-Richtung: Reihe; align-items: flex-start; Randradius: 2px; Z-Index: 30; -webkit-display: flex; -webkit-flex-direction: reihe; -webkit-align-items: flex-start; –

Flex-Eigenschaft funktioniert nicht in Safari-Browser

Antwort

Verwandte Themen