7

JQuery の jquery.corner.js を使用して、いくつかの td タグに丸い角を作成していますが、IE 以外ではうまく見えます

  1. 新しいタブを開いてからページに戻った場合
  2. 別のタブに移動した場合は、リンクをクリックしてからページに戻ります
  3. JavaScriptを実行するdiv /メニューにカーソルを合わせると（私は思う）。

丸みを帯びた角が水平線に置き換えられ、td タグ内のテキストが押し下げられます。ただし、ページが更新されると、レンダリングは通常に戻ります。いずれの場合も、Firefox で完全に動作します。

何か案は？

参考までに、私が使用している Javascript コードは次のとおりです (MOSS 2007 のページです)。

$(document).ready(function(){
   $("table.ms-navheader td").corner("top"); 
});

問題を完全に表示するサンプル HTML ページを次に示します。

<html>
    <head>
        <script type="text/javascript" src="jquery-1.2.6.js"></script>
        <script type="text/javascript" src="jquery.corner.js"></script>
        <script type="text/javascript">
          <!--

            $(document).ready(function()
            {
                $("div").corner("top");
                $("td").corner(); 
            });

          //-->
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td style="background-color: blue">
                    TD that will be messed up.
                </td>
            </tr>
        </table>
        <div style="background-color: green">
            divs don't get messed up.
        </div>
    </body>
</html>

上記のコードでは、新しいタブを開くと TD が混乱しますが、div は混乱しません。私は、MOSS によって生成された HTML をあまり制御できません。そうでなければ、表の代わりに DIV をここで使用してしまったかもしれません。

4

9 に答える 9

5

IE では、DD_Roundiesライブラリでより良い結果が得られました。ただし、IEでのみ機能します。Firefox の場合、 -moz-border-radius スタイルを追加する必要があります。

于 2009-09-18T10:28:26.800 に答える
4

私はRichHに同意します。人気のあるJavaScriptライブラリはすべて、丸みを帯びた角を作成しようとするときに、何かが望まれることを残していると思います。

私はいつもcornershopを使用していることに気づきます：http ：//wigflip.com/cornershop/ 、それは手動で丸みを帯びたエッジを作ることから苦痛を取り除く画像/cssジェネレーターです。

于 2008-10-20T18:23:18.360 に答える
3

jquery.curvycorners.js の代わりにこのプラグインを試してみてください。

プロジェクトでまったく問題なく使用しています。スパンを追加/先頭に追加する必要がある場合がありますが、非常に簡単です。

最良のこと -> デフォルトでアンチエイリアス。

http://blue-anvil.com/jquerycurvycorners/test.html

于 2008-10-21T10:05:12.033 に答える
2

角の丸い Javascript ライブラリ (特に IE6 と 7) に問題がありました。

最終的には、画像を含む従来のアプローチに戻りました。設定が少し面倒ですが、完璧に動作します。

于 2008-10-20T18:15:29.500 に答える
2

curvycorners.js と jquery.curvycorners.js は、トランジションを使用したくない場合にのみ機能します。

アコーディオンまたはフェード イン/アウト タブ効果がある場合、角が丸い要素は変更後に正しくレンダリングされません。

于 2010-05-24T13:24:05.843 に答える
1

jquery の曲線のコーナーを IE で機能させるには、要素に背景色を指定するだけです。なぜそうなのかはわかりません...ただ魔法のように機能します!

于 2011-05-15T22:04:17.797 に答える
0

あなたが抱えている問題を視覚化するのは少し難しいです、リンクは本当に役に立ちます。テーブルのセルごとに、高さと幅のプロパティが定義されていることを確認してください。hasLayoutの問題である可能性があります。

于 2008-10-20T18:17:07.517 に答える
0

jquery UIタブの角を丸くする解決策を検索しましたが、見つかりませんでした。jquery テーマローラーは丸みを帯びた角をサポートしていますが、ドキュメントには IE では機能しないと記載されています。

これは、25の異なる角丸方法を含む良いページです http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

于 2009-02-12T23:48:14.723 に答える
0

Firefox でも同様の問題がありましたが、背景色を設定するクラスを持つ要素に「コーナー」を適用すると、コーナーが適用されないことがわかりました。私の場合、UL で選択された「タブ」に異なる背景色を与える「selected」というクラスを追加します。これを防ぐために、コーナーを追加した後、css の代わりに js を使用して背景色を適用します。

$('.selected').css('background-color', '#3296C0');

また、背景色を変更する :hover を追加すると、ホバー時に角が元に戻ります。これまでの解決策は、コーナーを再適用する onhover イベントを使用することです (ここでも色を設定できます)。

 $('#top-nav li a').hover(function(){
        $(this).corners('top');
    });

IE6 に関しては - 悪夢です - IE6 を検出でき、コーナーを追加せずに角を四角にできれば、それほど悪くはありません。まだIE 7を試していません...

于 2009-06-04T12:58:03.507 に答える