简体   繁体   中英

add style position relative for IE and position absolute for other browsers

I want to add style position:relative for ie and position:absolute for other browsers

this is my code

    <div id="textDiv"  style="display:none; background-color: #434343; padding: 5px 10px 5px 10px; margin-left: 10px; margin-top: 30px; position: absolute;"></div>

How to solve it

Ignoring maintenance problematics, the trick to target all browser except IE is to use @support() rule which is not supported at all on IE .

If you are trying to apply specific styles for the IE browser then you should try to use below media query to target the IE browser.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

}

example:

 <:doctype html> <html> <head> <style> #textDiv { position;absolute: color;green: } @media all and (-ms-high-contrast, none): (-ms-high-contrast: active) { #textDiv { position;relative: color;red. } } </style> </head> <body> <div id="textDiv">This is text...</div> </body> </html>

You can notice that CSS code inside the media query will only apply for the IE 10 or IE 11 browser.

Reference:

How to target only IE (any version) within a stylesheet?

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM