Tips for solving CSS problems in IE7

http://www.telerik.com/support/kb/article/b454K-tkk-b454T-a.aspx

Article information

Article relates to

Radcontrols all versions 

Created by

Zarko, Telerik

Last modified

Nov. 14, 2006

Last modified by

Zarko, Telerik


 
PROBLEM
 
In connection with the CSS-application changes introduced in Internet Explorer 7 (IE7) a number of customers are experiencing problems with control skins. The following tips are aimed to help you troubleshoot the most common problems. We use the listed techniques internally to solve the majority of the CSS-related support incidents, so most probably they will be applicable in your case as well.

Other useful resources:
 • MSDN - " Cascading Style Sheet Compatibility in Internet Explorer 7
 • IEBlog - " Details on our CSS changes for IE7"

SOLUTIONS

1. CSS attributes starting with underscore are no longer applied in IE7
For example in the following CSS rule the background color would not be set to red in IE7:
<style type="text/css">
    .myDiv
    {
        _background-color:red;
    }
</style>
<div class="myDiv">TestContent</div>

IE6:




IE7:



NOTE: the underscore declaration will work in IE7 if the page is in Quirks mode. If it the page is XHTML 1 or 1.1 it will not work!


2. The “width” and “height” CSS attributes now work according to the W3C specification
In IE6 they behave as if the “min-width” or “min-height” property is set. Take the following example:

<style type="text/css">
    .myDiv
    {
        width:20px;
        height:20px; 
        background-color:red; 
    }
</style>
<div class="myDiv">Content<br/>Content<br/>Content<br/>Content<br/></div>

In IE6 the div would stretch to accommodate its content:





In IE7 the content would leave its container:




To solve that problem (specify minimal width but don’t clip the content) you should use “min-width” and “min-height”. However this would break IE6 support. The solution is to set “width” and “height” for IE6 and “min-width” and “min-height” for IE7. However IE7 must not see the “width” and “height” attributes. Here is how you can do it:

<style type="text/css">
    .myDiv
    {
        _width: 20px; /* Visible to IE6 only*/ 
        _height: 20px; /* Visible to IE6 only*/ 
        min-width: 20px; /* Visible to IE7 only */ 
        min-height: 20px; /* Visible to IE7 only */ 
    }
</style>
<div class="myDiv">Content<br/>Content<br/>Content<br/>Content<br/></div>

And here is the final output:

IE6 (the same as before)




IE7
:



To achieve the exact same behavior in IE7 the container should be floated to the left/right, i.e.:
<style type="text/css">
    .myDiv
    {
        float: left;
        height: auto;
        width: auto;   
    }
</style>


3. The "* html .myClass" declaration for css classes is invalid and should not be rendered by a browser.
IE6, however, incorrectly interpreted this declaration as "html .myClass" and applied the css class to elements on the page. This is the basis of a widely used method for making browser-specific css classes – “* html .myClass” would be understood only by IE6 and no other browser. This bug is fixed in IE7. For example in the following CSS rule the background color would be set to red in IE6, but not in IE7:

<style type="text/css">
    * html .myDiv
    {
        background-color:red;
    }
</style>
<div class="myDiv">TestContent</div>

IE6:




IE7:



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值