Home > Article > Web Front-end > css ie compatible writing method
CSS is a very important part of web design, but in different browsers, CSS compatibility is a very troublesome issue. Especially in IE browser, the problem of CSS compatibility is more prominent. Therefore, you must pay attention to the compatibility of IE browser when writing CSS styles. This article will introduce some commonly used IE-compatible writing methods.
1. Common IE browser compatibility issues
In IE browser, common CSS compatibility issues include the following:
2. Commonly used IE browser-compatible writing methods
In IE6, if If an element has both a background image and a background color set, the background image may not be covered by the background color. At this time, you need to add a _filter attribute to the container element and set its value to "inherit".
<code>.container{ background:url(images/bg.png) no-repeat; background-color:#fff; _filter: inherit; }</code>
In IE6, when two block elements or two inline elements meet, the border will not be covered. coverage situation. At this time, you can solve this problem by setting an empty div.
<code><div class="box"> <div class="inner"></div> </div> .box{ background:#fff; border:1px solid #ccc; position:relative; zoom:1; } .inner{ width:100%; height:100%; position:absolute; top:0; left:0; }</code>
The above code triggers the hasLayout mechanism of the IE browser by setting position:relative and zoom:1, and displays the border by setting an empty div element.
In IE6, when the margin-top and margin-bottom of two adjacent elements overlap, margin overlap will occur. Case. At this time, you can set a padding-top for the above element to avoid margin overlap.
<code><div class="parent"> <div class="children"></div> </div> .parent{ padding-top:1px; } .children{ margin-top:10px; height:50px; background:#ccc; }</code>
In order to support the transparency of PNG24 images in IE6, you can put a layer of div on the image and place it on this div Add a piece of JavaScript code.
HTML code:
<code><div class="png"> <img src="images/logo_bg.png" /> </div></code>
CSS code:
<code>div.png{ position:relative; _behavior: expression( function( ele ){ ele.innerHTML = '<span style="display:inline-block;width:' + ele.offsetWidth + 'px;height:' + ele.offsetHeight + 'px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+ ele.getElementsByTagName('img')[0].src + '\',sizingMethod=\'scale\')"></span>'; }(this) ); }</code>
In the above code, the _behavior attribute can bind JavaScript code to the element and execute it inside it.
In the IE browser, the position:fixed attribute cannot be supported, but similar effects can be achieved through JavaScript.
JavaScript code:
<code>function fixedPosition() { var obj = document.getElementById("fixed_obj"); var top = (document.documentElement.clientHeight - obj.offsetHeight) / 2 + document.documentElement.scrollTop; obj.style.top = top + "px"; } window.onscroll = fixedPosition; //初始时就调用一次以免刷新后没有滚动事件而没有效果 fixedPosition();</code>
It should be noted that if it is compatible with IE7 and above browsers, DOCTYPE should be set, otherwise IE will render the page in a weird mode, and compatibility issues may occur.
This article summarizes some commonly used CSS IE compatible writing methods, I hope it will be helpful to everyone. In actual projects, we should continue to summarize and explore better IE-compatible writing methods to improve the compatibility and user experience of web pages.
The above is the detailed content of css ie compatible writing method. For more information, please follow other related articles on the PHP Chinese website!