0

このページhttp://www.freecsstemplates.org/preview/fotofolium/の角を丸くする正確なコードが必要です。PIE.htc ファイルを使用すると、position:relative; を宣言した場合にのみ機能します。どこでも使用しましたが、レイアウトが乱れています。誰かがそのテンプレートの位置属性なしで機能するコードを提案できますか?

moz と webkit は提供していませんが、safari や chrome などで動作しています。あげただけ

border-radius:5px;
behavior: url("PIE.htc");
position: relative;

すべてのブラウザで動作するようにします。PIE.htcでも位置属性を削除すると、IEだけでは機能しません.ボーダーボックスにはmoz、webkitを使用したので、FF、Operaなどで機能する可能性があります.

4

2 に答える 2

0

CSSすべてのブラウザで角丸の宣言を設定できHTC、旧バージョンの Internet Explorer で使用できます。

setなしpositionで角を丸くした div の作業例!

CSS

.curved {
    -moz-border-radius:10px;        /* Firefox */
    -webkit-border-radius:10px;     /* Safari and chrome */
    -khtml-border-radius:10px;      /* Linux browsers */
    border-radius:10px;             /* CSS3 */
    behavior:url(border-radius.htc) /* Internet Explorer */
}

.menu_buttons {
    margin: 40px;
    width: 100px;
    line-height: 1.1em;
    float: left;
    vertical-align: middle;    
    cursor: pointer;
    text-align: center;
    font: 0.9em Arial, Helvetica, sans-serif;
    color: #fff;
    background-color: pink;
    border: 1px solid red;
}

例の HTML

<div class="menu_buttons curved">.menu_buttons element</div>

border-radius.htcをダウンロードして、 CSS の曲がった角のデモと Pageを確認してください。

テスト済み

Windows XP Professional バージョン 2002 Service Pack 3

  • Internet Explorer 8.0.6001.18702
  • オペラ 11.62
  • Firefox 3.6.16
  • サファリ5.1.2
  • Google Chrome 18.0.1025.168m
  • Kメレオン1.5.4

Windows 7 ホーム エディション サービス パック 1

  • Internet Explorer 9.0.8112.164211C
  • オペラ 11.62
  • Firefox 12.0
  • サファリ5.1.4
  • Google Chrome 18.0.1025.168m

Linux Ubuntu 12.04

  • Firefox 12.0
  • Chromium 18.0.1025.151 (開発者ビルド 130497 Linux)
于 2012-06-02T11:36:29.987 に答える
0

使用するborder-radius

IE は をサポートしていないため、 CSS3 PIEborder-radiusを使用できます。そこから PIE.htc が生まれました。

于 2012-06-02T10:57:57.543 に答える