Webページを開発していますが、クロスブラウジングテストをテストすると、CSSスタイルがgoogle chromeおよびsafari5と競合するようになりました。
すべてのブラウザ(Firefox、Chrome、Opera)用の私のコード
.flex-direction-nav-featured a{
margin-top: 4%;
}
これを試してみましたがうまくいきません
/* for safari only (wont work)*/
::root .flex-direction-nav-featured a{
margin-top: 5%;
}
/* for safari only (but works with chrome also)*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* works with sfari and chrome */
.flex-direction-nav-featured a{
margin-top: 5%;
}
}
Safari 5のみを対象とするCSSハックはありますか?私は多くのことを試しましたが、どれもうまくいきませんでした。
疑似クラスを介してchromeをブロックしてみてください:
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
.flex-direction-nav-featured a{
margin-top: 4%;
}
/* Safari only override */
::i-block-chrome,.flex-direction-nav-featured a{
margin-top: 5%;
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari only override */
::i-block-chrome,.flex-direction-nav-featured a {
margin-top: 5%;
}
}