为ie6修复css需要帮助!

时间:2022-11-06 07:20:16

I have been trying very hard to achieve rounded corners with IE6+jquery ui tabs.

我一直在努力用IE6 + jquery ui标签实现圆角。

I have this page prepared: http://jsbin.com/uzoko (w/out dd_roundies)

我准备了这个页面:http://jsbin.com/uzoko(w / out dd_roundies)

Ofcourse, the rounded corners work in FF but not IE6. Because some of the properties used in CSS are specific to FF and Chrome.

当然,圆角可用于FF,但不适用于IE6。因为CSS中使用的某些属性特定于FF和Chrome。

I had asked this question yesterday 为ie6修复css需要帮助! and based on that suggestion I used the DD_Roundies library. However, the sample page I provided up top doesnt have the ability to add DD_Roundies library so I cant really 'show' what exactly is wrong with the page when it is openeing in css.

我昨天问了这个问题,基于这个建议我使用了DD_Roundies库。但是,我提供的示例页面顶部没有能力添加DD_Roundies库,因此我无法真正“显示”页面在css中打开时究竟出现了什么问题。

But after implementing DD_Roundies I can see the rounded corners in IE6 fine. HOWEVER, I have following problems:

但在实现DD_Roundies后,我可以看到IE6中的圆角很好。但是,我有以下问题:

  1. ONLY the 'First' tabs seems to have rounded corners. When i click on second tab, it doesnt have rounded corners and so doesnt the third.
  2. 只有'First'标签似乎有圆角。当我点击第二个标签时,它没有圆角,所以不是第三个。

  3. when I move away from First tab, it seems to have a border with color #990000.
  4. 当我离开First标签时,它似乎有一个颜色为#990000的边框。

All of this does not happen in FF @#$%@$!!

所有这一切都不会发生在FF @#$%@ $ !!

Since I am unable to put DD_Roundies library code in jsbin I will put what I have relative to dd_roundies on my page, here:

由于我无法将DD_Roundies库代码放在jsbin中,因此我将把相对于dd_roundies的内容放在我的页面上,这里:

        DD_roundies.addRule('.ui-corner-all', '4px');
        DD_roundies.addRule('.ui-corner-top', '2px 2px 0px 0px');
        DD_roundies.addRule('.ui-corner-bottom', '0 0 4px 4px');
        DD_roundies.addRule('.ui-corner-right', '0 4px 4px 0');
        DD_roundies.addRule('.ui-corner-left', '4px 0 0 4px');
        DD_roundies.addRule('.ui-corner-tl', '4px 0 0 0');
        DD_roundies.addRule('.ui-corner-tr', '0 4px 0 0');
        DD_roundies.addRule('.ui-corner-br', '0 0 4px 0');
        DD_roundies.addRule('.ui-corner-bl', '0 0 0 4px');

I am not good at CSS to begin with and then correcting css so it works with freaking ie6 is whole another battle that I can use some help in. Please!

我不擅长CSS开始然后纠正CSS所以它适用于怪异ie6是另一场战斗,我可以使用一些帮助。请!

Also, as suggested in the question I asked yesterday, I tried using images as well. I used cornershop website to create two rounded corner images. http://tinypic.com/r/30j1rgz/5 and http://tinypic.com/view.php?pic=50joqq&s=5 but with these when I changed 'Interaction States' section of the css and property .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited to the following

另外,正如我昨天提出的问题中所建议的那样,我也尝试使用图像。我用cornerhop网站创建了两个圆角图像。 http://tinypic.com/r/30j1rgz/5和http://tinypic.com/view.php?pic=50joqq&s=5但是当我改变了css和属性的'交互状态'部分时。 state-active a,.ui-state-active a:link,.ui-state-active a:访问以下内容

background: #990000; 
font-weight: bold; 
color: #ffffff; 
text-decoration: none; 
outline: none;
background: url(nw.gif) no-repeat top left; 
background: url(ne.gif) no-repeat top right; 

then I got even weirder restuls :(

然后我甚至得到了更奇怪的恢复:(

1 个解决方案

#1


ok, after 2 hours of work, i gave up useing DD_roundies,
it just doesn't work well with combination with the Tabs UI.

好吧,经过2个小时的工作,我放弃了使用DD_roundies,它与Tabs UI的组合效果不佳。

Then I tried another plugin which I know should work, and tested on:
IE6, IE7, FF3

然后我尝试了另一个我知道应该工作的插件,并测试了:IE6,IE7,FF3

all works well!

一切顺利!

See demo here

在这里看演示

I've also modified your CSS.
put the whole "Corner radius" section on comment. no need for that.

我也修改了你的CSS。把整个“转角半径”部分放在评论上。没必要。

Hope this suits your needs :)

希望这适合您的需求:)

#1


ok, after 2 hours of work, i gave up useing DD_roundies,
it just doesn't work well with combination with the Tabs UI.

好吧,经过2个小时的工作,我放弃了使用DD_roundies,它与Tabs UI的组合效果不佳。

Then I tried another plugin which I know should work, and tested on:
IE6, IE7, FF3

然后我尝试了另一个我知道应该工作的插件,并测试了:IE6,IE7,FF3

all works well!

一切顺利!

See demo here

在这里看演示

I've also modified your CSS.
put the whole "Corner radius" section on comment. no need for that.

我也修改了你的CSS。把整个“转角半径”部分放在评论上。没必要。

Hope this suits your needs :)

希望这适合您的需求:)