jQuery角落和IE问题

时间:2010-03-24 16:28:56

标签: javascript jquery rounded-corners

我正在使用“malsups”jQuery角落插件 - http://jquery.malsup.com/corner/ - 并且在IE中遇到了一些噩梦。基本上我有

<ol><li>
    <span class="main">
        <span class="test1"></span>
        <span class="test2"></span> 
        <span class="test3">
        <span id="test4"></span> 
        <span  id="special" class="special">
            <span class="test4">TEXT</span>
        </span>
    </span>
</li></ol>

基本上,在IE中,当我尝试使id =“special”具有圆角时 - 我得到一个扭曲的视图。我认为它与使用

引用li元素的问题有关
    jQuery('#special').corner('5px'); 

有人可以帮忙:)?

编辑:确保CSS

ol .special {
background-color:#111;
color:#CCC;
padding:10px;
position:relative;
}

2 个答案:

答案 0 :(得分:0)

css类'main'是否定义了背景颜色?确保在父树中的某处显式设置了背景颜色。

ol .main { background-color:#fff; }

答案 1 :(得分:0)

我实际上不同意使用此实现。我找到了大约3种不同的圆角方法。

1. Adding extra markup (div tags) to create the rounded corners
2. Using right and left rounded corner images
3. Using top image and bottom image with rounded corners on both sides of the images

您的实施正在使用#1。它可能是最容易实现的,但需要付出代价。

在CSS现在的状态下,除了这三种方式(我知道)之外,没有简单的方法来添加圆角。我相信第一个选择是3中最差的,因为额外的标记是不必要的。我通常使用最后一个,但第二个将加载更快。

还有一件事,请查看IE中的那个页面(http://jquery.malsup.com/corner/).....它在IE上的实现也不起作用。我相信他正在使用FF圆角CSS值来​​做到这一点。

希望这有帮助。

大都市