0

すべてのブラウザーで角を丸くするために、malsup の jQuery Corners プラグインを使用しています。これまでのところ、私にとってはうまくいきました。しかし今はそうではありません。それは単にそうではありません-私はそれを説明する方法がわかりません.

古い IE と最新のブラウザーの両方で角を丸くする別の方法をご存知でしょうか?

HTML:

<nav id="mainMenu" class="container_24">
    <ul>
        <li><a href="">One</a></li>
        <li><a href="">Two ›&lt;/a></li>
        <li><a href="">Three ›&lt;/a></li>
        <li class="search">
            <form action="">
                <input type="text" placeholder="Search ›">
            </form>
        </li>
        <li><a href="">‹ Help</a></li>
    </ul>
</nav>

CSS (少ない):

nav#mainMenu {
    margin-top: -9px;
    background: #fafafa;
    height: 62px;
    border-bottom: 3px solid #e2e2e2;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(000, 000, 000, 0.25);
    box-shadow: 0px 0px 10px 0px rgba(000, 000, 000, 0.25);

    ul {
        list-style: none;
        margin: 0;
        padding: 0;

        li:last-child {
            a {
                border: 0;
            }
        }

        li {
            float: left;

            a, input {
                display: block;
                font: bold 12px/62px "Source Sans Pro", Arial, sans-serif;
                color: #4b4b4b;
                text-transform: uppercase;
                padding: 0 20px;
                border-right: 1px solid #e2e2e2;
            }
            a:hover, input:focus {
                border-bottom: 3px solid #cc624a;
                text-decoration: none;
                outline: 0
            }

            form {
                input {
                    border: 0;
                    border-right: 1px solid #e2e2e2;
                    height: 62px;
                    background: transparent;
                }
            }
        }
    }
}

JS:

$('nav#mainMenu').corner('5px');
$('nav#mainMenu ul li:first-child a').corner('5px bl');
$('nav#mainMenu ul li:last-child a').corner('5px br');

私のフィドルはここにあります。

4

1 に答える 1

0

私が読んだことから、jQuery Corners プラグインには、背景と境界線に関するこのような問題があります。そのため、これの代わりにCSS3 PIEを使用したところ、うまく機能しました。

于 2012-12-16T21:11:33.733 に答える