I have a page.css used from the master page to others pages. In that file I have a property for a div: <div class="classDivOne">Hello</div>
that is:
.classDivOne{
margin-top:5px;
}
Now, with windows explorer everything is fine.
Instead with Chrome I need to fix margin-top:0px;
.
I used media queries (inside master page) in this way:
<style type="text/css">
@media screen and (-webkit-min-device-pixel-ratio:0) {
.classDivOne{
margin-top:0px;
}
}
</style>
but I noted that the file css is the primary choice and my media screen for chrome is not used. If I put into the div style="margin-top:0px"
I have the same result.
How can I set the priority into the choice of css for that div? Or there is a different solution?
write this way
<style type="text/css">
@media screen and (-webkit-min-device-pixel-ratio:0) {
.classDivOne.classDivOne{
margin-top:0px;
}
}
</style>
or
<style type="text/css">
@media screen and (-webkit-min-device-pixel-ratio:0) {
.classDivOne{
margin-top:0px !important;
}
}
</style>
CSS :
<style type="text/css">
@media screen and (-webkit-min-device-pixel-ratio:0) {
.classDivOne{
margin-top:0px !important;
}
}
</style>
! important
is used to make the priority of property higher than other.
<style type="text/css">
@media
only screen and (-webkit-min-device-pixel-ratio: 0),
only screen and ( min--moz-device-pixel-ratio: 0),
only screen and ( -o-min-device-pixel-ratio: 0),
only screen and ( min-device-pixel-ratio: 0),
only screen and ( min-resolution: 0dpi),
only screen and ( min-resolution: 0px) {
.classDivOne{
margin-top:0px !important;
}
}
/*OR*/
@media screen and/*!*/(-webkit-min-device-pixel-ratio:0) {
.classDivOne{
margin-top:0px !important;
}
}
</style>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.