web-dev-qa-db-ja.com

IE8のCSS角丸

IE8の角の丸みに問題があります。成功せずにいくつかの方法を試しました。

ここに私のコードがあります：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>

<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8em;
  padding: 2px;
  margin: 2px;
  color: #505050;
  line-height: normal;
}
p {
  margin: 4px;
}
.categoryheading3 {
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  background-color: #297BB6;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  padding: 8px 0;
  text-align: center;
  margin: 0px;
}
.leftcolumn {
  width: 174px;
  padding: 8px;
  float: left;
  display: inline-block;
  background-color: transparent;
  /*--min-height: 500px*/
  overflow: hidden;
}
.lefttop {
  display: inline-block;
  width: inherit;
  margin: 0 5px 2em 0;
  float: left;
  width: 160px;
  background-color: #FFFFFF;
  border: 2px solid #297BB6;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
</style>


</head>
<body>

<div class="leftcolumn">
  <div class="lefttop">
    <H4 class="categoryheading3">Heading</H4>
    <p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text </p>
  </div>
</div>
</body>
</html>

これはFirefoxでこれを生成します：

firefox example

しかし、これはIE8で：

IE8 makes me sad

誰かが何かヒントを持っている場合、私は非常に感謝します！

編集：ジョセフはpie.htcを使用することを提案することで助けましたが、私はまだこの要素が機能しないことに苦労しています：

.categoryheading3 {
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  behavior: url(PIE.htc);
  background-color: #297BB6;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  padding: 8px 0;
  text-align: center;
  margin: 0px;
}
cssinternet-explorerinternet-explorer-8rounded-corners
58
falter

Internet Explorer（バージョン9未満）は、角の丸みをネイティブでサポートしていません。

それを魔法のように追加してくれるすばらしいスクリプトがあります： CSS3 PIE 。

私は何度も使用しましたが、驚くべき結果が得られました。

69
Joseph Silber

IE8の角丸

Internet Explorer 8（およびそれ以前のバージョン）は丸みを帯びた角をサポートしません、however他に考えられるソリューションはほとんどありません：

  • 代わりに角丸Imagesを使用します（ this ジェネレーターは優れたリソースです）

  • here からjQuery Corner pluginを使用します

  • here（Pro's＆Con's here からのCSS3 PIEという非常に優れたスクリプトを使用します）

  • チェックアウトCSS Juice from here

  • 別の優れたスクリプトはIE-CSS3 fromhere

CSS PIEは最も一般的なソリューションですが、他のすべてのソリューションを確認し、ニーズに最適なものを選択することをお勧めします。

役に立てば幸いです。幸運を！

33
Lior Elrom

この投稿を見た後、私はcss3pie.com、非常に便利なサイトについて知りませんでした：

しかし、それをテストした後、私にとっても機能しませんでした。しかし、.PHPファイルでラップすることで問題なく動作することがわかりました。代わりに：

behavior: url(PIE.htc);

これを使って：

behavior: url(PIE.php);

私はjqueryというフォルダに私のものを入れたので、私のものは次のとおりでした：

 behavior: url(jquery/PIE.php);

ダウンロードに行くか、ここから入手してください：

http://css3pie.com/download-latest

そして、PHPファイルを使用します。 PHPファイル内では、一部のサーバーが.HTCを適切に使用するように構成されていないことを説明しています。それが私が抱えていた問題でした。

それを試してみてください！私がやった、それは動作します。これが他の人にも役立つことを願っています。

4
Chud37

http://fetchak.com/ie-css3/ はIE 6+で機能します。 css3pieが機能しない場合に使用します。

2
Gautham

PIE.htcはうまく機能しました（ http://css3pie.com/ ）が、1つの問題があります：

PIE.htcへの絶対パスを記述する必要があります。相対パスを使用したときはうまくいきませんでした。

2
Zhenya

Internet Explorerは丸みを帯びたコーナーをネイティブにサポートしていないため。そのため、クロスブラウザでより適切に処理するには、角の丸い角の画像を使用します。多くの有名なWebサイトがこのアプローチを使用しています。

また、ウェブの周りに丸い画像ジェネレーターを見つけることができます。そのようなリンクの1つは http://www.generateit.net/rounded-corner/ です

0
zixtor