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 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中的圆角很好。但是,我有以下问题:
- 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.
- when I move away from First tab, it seems to have a border with color #990000.
只有'First'标签似乎有圆角。当我点击第二个标签时,它没有圆角,所以不是第三个。
当我离开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!
一切顺利!
在这里看演示
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!
一切顺利!
在这里看演示
I've also modified your CSS.
put the whole "Corner radius" section on comment. no need for that.
我也修改了你的CSS。把整个“转角半径”部分放在评论上。没必要。
Hope this suits your needs :)
希望这适合您的需求:)