List of Browser Specific Hacks
Web UI design for beginners may be complicated than it seems specially if your developing cross browser application. For example building a ...
https://www.czetsuyatech.com/2021/07/web-browser-specific-hacks.html
Web UI design for beginners may be complicated than it seems specially if your developing cross browser application. For example building a web app compatible with firefox, ie6 and ie7.
One ways is to simply load the appropriate css file using:
//And there are the known hacks:
1.) Style for IE only, just prefix the child element with * html:
e.g:
2.) !important tag is ignored by IE6 and below browser so:
eg. background-color: green !important; /* most browser read this, but ignored by ie6 */
3.) IE6 only acceptable prefix _property and -property. Failed on non ie6.
eg. _color: red; /* IE6 and below only */
4.) IE7 only acceptable prefix *property. Failed on non ie7.
eg. *color: red; /* IE7 only */
5.) html *, selects all the child of the html element in ie7 and below only.
6.) >body, selects the body element in ie7 only
eg. >body { background-color: red; } /* ie7 only */
body { background-color: green; } /* non-ie 7 */
Can be extend: >body classname or >body div classname
I know I've tried html>body in firefox and it's working too.
7.) And what I learned last night. I have two dropdown menus, the second is completely below the first. The problem is the first dropdown should have a z-index greater than the second menu so it will overlap the second. Example
Note: I have it working in non-ie.
Actual tags:
Note:
I got most of the ideas from the web just google them for more information.
Even though the z-index of .vertical1 is greater than .horizontal2, items from horizontal2 still shows in the top of the stack, and my conclusion is that IE considers the parent tag and ignores that of the child example:
*z-index of .two will still be 0 inherited from .one.
That's all :-D, Hope I find it useful in the future :-)
One ways is to simply load the appropriate css file using:
<!--[if IE]>
<style type="text/css">
@import url(ie-styles.css);
</style>
<![endif]-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie.css" media="all"/>
<![endif]-->
//And there are the known hacks:
1.) Style for IE only, just prefix the child element with * html:
e.g:
* html div {...}
* html div classname {}
2.) !important tag is ignored by IE6 and below browser so:
eg. background-color: green !important; /* most browser read this, but ignored by ie6 */
background-color: white; /* IE6 and below will use this value */
3.) IE6 only acceptable prefix _property and -property. Failed on non ie6.
eg. _color: red; /* IE6 and below only */
color: green; /* firefox, etc */
4.) IE7 only acceptable prefix *property. Failed on non ie7.
eg. *color: red; /* IE7 only */
color: green; /* firefox, ie6 and below, etc */
5.) html *, selects all the child of the html element in ie7 and below only.
.html * { color: red; }
6.) >body, selects the body element in ie7 only
eg. >body { background-color: red; } /* ie7 only */
body { background-color: green; } /* non-ie 7 */
Can be extend: >body classname or >body div classname
I know I've tried html>body in firefox and it's working too.
7.) And what I learned last night. I have two dropdown menus, the second is completely below the first. The problem is the first dropdown should have a z-index greater than the second menu so it will overlap the second. Example
menu1 list /* if i click here dropdown will pop out and cover menu2 list */
menu2 list
Note: I have it working in non-ie.
Actual tags:
<ul class="horizontal1">
<li>
item
<ul class="vertical1">
<li>sub-item</li>
</ul>
<li>
</ul>
<ul class="horizontal2">
<li>
item
<ul class="vertical2">
<li>sub-item</li>
</ul>
<li>
</ul>
//css:
.vertical1 { z-index: 3; }
.horizontal2 { z-index 1; }
Note:
I got most of the ideas from the web just google them for more information.
Even though the z-index of .vertical1 is greater than .horizontal2, items from horizontal2 still shows in the top of the stack, and my conclusion is that IE considers the parent tag and ignores that of the child example:
<div class="one">
<div class="two"></div>
</div>
//css
.one { z-index: 0; }
.two {z-index: 1; }
*z-index of .two will still be 0 inherited from .one.
That's all :-D, Hope I find it useful in the future :-)
1 comment
test
Post a Comment