web-dev-qa-db-ja.com

IE8の境界線半径

IE8の境界半径に問題があり、今までpie.jsを使用していましたが、バグがあるため、このjsライブラリはお勧めしません。多くのhtmlページを持たない小さなサイトがある場合、そのライブラリを使用することは問題ありませんが、多くの異なるフレームワークが使用される重いアプリケーションがある場合、それを使用することはできません。 CurvyCornersまたはその他のメガライブラリでも同じ動作です。

だから、もし誰かが小さなjQueryまたはjavascriptプラグインで私を助けることができれば、IE 8で私は人生に感謝します。

javascriptjquerycssinternet-explorer-8css3
35
BurebistaRuler

これを試して：

必要なもの：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.corner.js"></script>

Javascript：

$('.box').corner();

HTML：

<div class="box">Hello</div>

CSS：

box{
  width:150px;
  height:28px;
  padding:10px;
}

その他の例： http://jquery.malsup.com/corner/

40
Abudayah

質問で説明したライブラリを使用する以外には、IE8で角を曲がることはできないと思います。

本当に必要な場合は、画像を使用して、帯域幅の増加とコードの乱雑化を犠牲にして、曲がった角の効果を与えることができます。

18
Tom Will

Microsoft によると：

その他の角の丸いソリューション

Webで利用可能な代替ソリューションの豊富さを指摘したいと思います。個々の角丸ソリューションに加えて、Internet Explorerや他のブラウザの複数のバージョンと互換性のある角丸ソリューションのリストが頻繁に更新されるサイトもあります。

ここにリストされているのは、集約された角の丸いソリューションのための私たちのお気に入りのサイトのいくつかです。それらは順不同で表示され、リンクを含めることは、Microsoftによるサイトの承認を意味するものではありません。

6
j08691

この投稿をチェックしてください： http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-Explorer/

IE7/8では、特に丸い角とボックスシャドウをカバーしています。

また、非常に多くの例を以下に示します

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

5
samirprogrammer

過去に border-radius.htc を使用しました。

唯一の痛みは、CSS URLがCSSファイルに関連していることです。 HTCはページに関連しています。

ここからデモをダウンロードできます

4
Etch

Cssの：beforeおよび：after擬似クラスを使用して、曲線のコーナーを追加してみませんか。

トムウィルの回答に対するあなたのコメントは、多くのフォーム入力があることを示唆しています。

まあ、私は彼らが幅でほとんど均一になると思います。

curved-std-width、curved-lge-width、curved-sml-widthなどのクラスを作成するだけで、CSSでこれを実行できます。

.curved-std-width:before {
  height: 5px;
  background: url('curved-top-5px.png');
}

.curved-std-width:after {
  height: 5px;
  background: url('curved-bottom-5px.png');
}

そのようなものは、フォーム入力の前後に無限のhtmlを追加しなくても、かなりうまく機能するはずです。

それ以外の場合は、jQueryを使用しても同様に実行できます。

$(':input').before('<div class="left-top-corner"></div><div class="right-top-corner"></div>').after('<div class="left-bottom-corner"></div><div class="right-bottom-corner"></div>');

そして、適切にスタイルします。

3
Thomas Clayson

JQueryの corner plugin を使用しないのはなぜですか？

特定のクラス名またはIDを持つ任意の要素にコーナーを簡単に適用できます。例えば：

$("#box1").corner();

また、要素を装飾するコーナー効果のタイプを装飾または変更できます。

CurvyCorners または他の CSSソリューション のような他のJavaScriptソリューションを使用することもできます。別のオプションは、JavaScriptを使用して<div>要素はフォームに入力し、CSSの背景画像を使用して、丸い角の外観をエミュレートします。この最後のソリューションの手順については、 このチュートリアル を参照してください。

3
hohner

これはいですが、入力フィールドの背景色を事前に知っている場合は機能する可能性があります（送信ボタンで問題になる可能性があります）： http://jsfiddle.net/563c5/1/

平均的なコンピューターで多くの入力フィールドをレンダリングするとき、どのように動作するかわかりません。

IE8はインラインCSSイメージをサポートし、4つの丸い角すべてに1つの小さなイメージのみが必要です。コーナー画像に依存するソリューションでは、実際には数バイトの帯域幅が余分に必要になるだけです。

2
juanrpozo

これを試しましたか？ http://jquery.malsup.com/corner/

1
MatthewK

Modernizr を試してみることをお勧めします。それは、古いブラウザーでサポートされていない（ほとんどではないが）CSS3の代わりに使用できることです。私はドラマなしでいくつかの大きなウェブアプリでそれを使用しました。

jQuery UIライブラリ を見ると、角の丸いスクリプトがいくつかあると思います。

これがお役に立てば幸いです！

1
Ryan

これを使用：http://css3pie.com/

PIEを使用すると、Internet Explorer 6-9で最も便利なCSS3装飾機能のいくつかをレンダリングできます。

サポートされているCSS3機能

border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image
1
Mandeep Pasbola

角の丸い画像を使用して、divの境界を設定できます。例：

http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-borders.shtml

または、次のような魔法を作成します。

http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

1
cowboybkit

代替のpie.htcを使用する必要があります。これは似ていますがバグが少なく、どちらの方法でもお勧めしません。

これらの非css3準拠ブラウザでcss3要素を頻繁に使用すると、パフォーマンスが低下します。システムが最新のものではなく、非常に遅延する可能性があります。だから、彼らが通常のコーナーに劣化するのは良いことです。

本当に見栄えを良くしたい場合、つまり、画像のスプライト背景を使用するのが最善の場合、または遅れの問題のために多くの訪問者を追い払うために変更する場合。

1
devric

以前の貢献者がカバーしていたかどうかはわかりませんが、主にdd_roundiesライブラリを使用し、角が丸いだけでは問題なく動作しました。角をIEフィルターと混合することは、通常、あまりにも多くを尋ねることができませんでした。

1
heliogabal

JavaScriptベースのもう1つのソリューション： Nifty Corners Cube 。 GNU GPLとしてリリースされており、jQueryは必要ありません。

0
Pino

このコードを使用して、IE 6+

<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/JavaScript" src="http://malsup.github.com/jquery.corner.js</script>
<script>
    $('#logo-navsection').corner( function() {
        $("this").css("border-top", "0px 0px opx 10px")                
    });
</script>
0
Manikanta