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 回答