2

Safari と Chrome で一貫した境界半径を取得する際に問題が発生します。Firefox は問題ありません。

以下は、Safari または Chrome で境界線の半径を生成しません。

.hero-wrapper {
position: relative;
z-index: 2;
float: left;
width: 100%;
height: 429px;
border-radius: 10px;
border-top-left-radius: 0;
-webkit-border-radius: 10px;
-webkit-border-top-left-radius: 0;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius: 10px;
-moz-border-top-left-radius: 0;
-o-border-radius: 10px;
-o-border-top-left-radius: 0;
overflow: hidden

}

皮肉なことに、DOM 内の他の項目で -moz または -webkit を指定せずに「border-radius」を使用するだけで、すべてのブラウザーで機能します...とても混乱しています。Stackoverflow で他のいくつかの投稿をチェックして、以前のバージョンの Safari のバグについて読みましたが、私のものは最新であり、Chrome でも問題を引き起こしています。

以下は、すべてのブラウザーで機能する他の境界半径コードです。

.hero-cta:before, .nav-wrapper:before, .nav-wrapper:after, #feature-slider:after {
position: absolute;
content: "";
border-radius: 100px;
box-shadow: rgba(212,212,212,100) 550px 50px 150px;
width: 420px;
height: 300px;
opacity: .8

}

開発サイトへのリンクは次のとおりです: http://www.plasticmonument.com/biomechaniks/index.html

4

2 に答える 2

0

これは、サイトでこれらの飛行画像をどのように使用するかによって、divの代わりに画像に境界線を適用すると、希望どおりの画像になります。

于 2012-10-12T02:31:03.173 に答える
0

まず第一に、いくつかの CSS ルールの末尾にセミコロンがありません。そのため、セミコロンがどこに配置されているかによって機能する場合と機能しない場合があります。たとえば、CSS のオーバーフロー ルールと不透明度ルールにセミコロンがありません。第二に、クロムは、私が作ったこのフィドルに基づいて、接頭辞なしの境界半径をサポートしています。つまり、webkit プレフィックスを入力する必要がないということです。これは、コード内のスペースを浪費し、css ファイル全体のサイズを肥大化させるだけだからです。

于 2012-10-12T02:17:11.720 に答える