I am developing a web page and when I test for cross-browsing testing I got my CSS style got conflict with my google chrome and my safari 5.
my code for all browsers ( firefox, chrome, opera)
.flex-direction-nav-featured a{
margin-top: 4%;
}
I try this one but it wont work
/* 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%;
}
}
Is there a CSS hack which only targets Safari 5? I have tried many things but none worked.
You might want to try to block chrome via a pseudoclass:
@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%;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With