How to fix bounding boxes in IE8 (ie7, ie6)

I am using this CSS:

    #main{  
        border-radius: 50px;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
            -webkit-border-radius: 50px;
            -webkit-border-bottom-right-radius: 4px;
            -webkit-border-bottom-left-radius: 4px;
            -moz-border-radius: 50px;
            -moz-border-radius-bottomright: 4px;
            -moz-border-radius-bottomleft: 4px;
    }

      

It works great in FF, Chrome, IE9 (I think) and Safari ... But its soooo ugly in IE8.

There are users using IE8, I tried the .htc file but doesn't support bottom-right and bottom-one-radius borders ...

I'm looking for a JS or HTC file that supports this (or another solution for that) I only need this for IE8, but it's great if it supports IE6 and IE7!

Thank!

+3


source to share


3 answers


You can try CSS Pie . I haven't used it, so I can't vouch for it.



All in all though: I would have let it go. The lack of rounded corners will not break the user experience in IE8. Better browsers get better experiences. Progressive enhancement is a wonderful thing.

+10


source


border-bottom-right-radius Browser support:

border-bottom-right-radius is supported as-in Opera 10 .

To make it work in Firefox and Safari, you have to use two related properties:

-moz-border-radius-bottomright

- for Firefox 3+

-webkit-border-bottom-right-radius -

for Safari 2+

It must be supported by Internet Explorer 9 .



border-bottom-right-radius Examples:

Create a standard rounded corner:

border-bottom-right-radius:1em;
-moz-border-radius-bottomright:1em;
-webkit-border-bottom-right-radius:1em;

      

To create a shallower curve:

border-bottom-right-radius:1.6em 1em;
-moz-border-radius-bottomright:1.6em 1em;
-webkit-border-bottom-right-radius:1.6em 1em;

      

border-bottom-right-radius Special Notes : Remember to set the -moz and -webkit styles and the base border-bottom-right-radius so that your curves will appear in most modern browsers.

0


source


use a graphic with a graphic in Photoshop and use it ..... because border-radius-bottomleft, border-radius-bottom right, etc. do not work on ie6-8 .... only border -radius property at ....

WHAT IS IMPOSSIBLE TO SOLVE THAT THE PROBLEM IS USED ONLY BY USING CSS THIRD

background-color: #E8EDEF;
    border-radius: 10px 10px 10px 10px;
    display: block;
    margin-left: 78px;
    width: 591px;
behavior: url(pie/PIE.htc);

      

border-radius-bottom right * / doesn't work in ie6-8

0


source







All Articles