закругленные углы без javascript или css3

Question

У меня есть меню навигации, в котором состояние наведения ссылки выглядит следующим образом:

Как видите, на оранжевом фоне установлен фон с закругленными углами,Клиент запросил, чтобы это работало прямо через IE6 (они еще не находятся на стадии, когда они могут обновить).Сейчас я начал заниматься веб-разработкой совсем недавно, поэтому я не изучил старые методы для достижения этого эффекта, не могли бы вы меня просветить?Ниже мой код, в настоящее время я использую CSS3.

#navPrimary {
        background:#de4702;
        height:37px;
        margin:0px auto;
        width:517px;
        padding:5px 0px 0px 0px;
        display:block;
        overflow:hidden;
    }

        #navPrimary li {
            width:252px;
            float:left;
            display:block;
            height:100px;
            list-style-type:none;
            text-align:center;
            margin:0px 0px 0px 8px;
        }

            #navPrimary li.first {
                width:67px;
                padding:0px 14px 0px 14px;
                display:block;
                margin:0;
            }

            #navPrimary .last {
                width:154px;
            }

            #navPrimary li a {
                color:#fff;
                font-weight:bold;
                text-decoration:none;
                display:block;
                height:27px;
                padding:10px 0px 0px 0px;

            }

                #navPrimary li a:hover {
                    color:#de4702;
                    background:#fff;
                    -moz-border-radius:10px 10px 0px 0px;
                    -webkit-border-radius:10px 10px 0px 0px;
                    border-radius:10px 10px 0px 0px;
                }

<ul id="navPrimary">

      <li class="first"><a href="/" title="#request.sitename# | Home">Home</a></li>

      <li><a href="##" title="Free Admission">Free Admission </a></li>

      <li class="last"><a href="#request.public_vroot#index.cfm?fuseaction=game.terms" title="Terms &amp; Conditions">Terms &amp; Conditions</a></li>

    </ul>

Answer 1

Техника для достижения этого называется Раздвижные двери .Подробнее об этом здесь .
В основном речь идет об использовании изображений в двух элементах (двух частях двери) .. один с левой стороны, а другой с правой стороны.

Answer 2

Это займет несколько пролетов и изображений, но вы можете получить тот же эффект, используя технику раздвижных дверей CSS.Проверьте этот список отдельно от статьи здесь: http://www.alistapart.com/articles/slidingdoors/

Answer 3

Вы также можете попробовать это css3pie , который рекламирует поддержку тегов css3 для IE6 до IE8

Answer 4

Вы также можете взглянуть на другое чистое CSS-решение для закругленных углов, которое не требует изображений или JavaScript.http://www.spiffycorners.com/

Answer 5

Если единственная причина, по которой вы отклонили JavaScript в качестве опции, заключается в том, что вы не думаете, что инфраструктура JavaScript будет поддерживать IE6, то вам стоит проверить RaphaelJS (http://raphaeljs.com/)?

RaphaelJS - это графическая библиотека, которая поддерживает все основныебраузеры , включая IE6.

Answer 6

Это может не сработать, но если вам нужны закругленные углы и все четыре угла имеют одинаковый радиус, вы можете заставить его работать с CSS3 PIE:

http://css3pie.com/

Опять же, это работает, только если все ваши углы имеют одинаковый радиус.