0

私は PC で作業しているので、この問題が発生していることに気づきませんでした。基本的に、コンテナの丸みを帯びた角は Safari では表示されません。使用したコードは Safari と互換性があると信じているため、これは奇妙です。これに関するご意見をいただければ幸いです。

これが私のコンテナコードです:

.container {
  clear: both;
  margin: 20px auto;
  width: 940px;
  background: #fff;
  -moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  position: relative;
  z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
/*   overflow-x: hidden; */
  *zoom: 1;
}

そして、私のウェブサイトは基本的にそれに包まれています：

<div class="container">
    WEBSITE
</div>

Safari を使用している場合は、ここで問題を確認できます。

4

2 に答える 2

3

問題は、接頭辞付きの のバージョンはすべてあるborder-radiusのに、標準の接頭辞なしのバージョンがないことです。

追加する必要がありますborder-radius: 10px;

はい、Safari は Webkit ブラウザーなので、動作するはずだと思うかもしれません-webkit-border-radiusが、プレフィックス付きのバージョンは、スタイルが実験的な間だけ存在することになっています。標準になると、ブラウザはプレフィックス付きのバージョンのサポートを中止し、標準バージョンのみをサポートすることになっています。

border-radiusはずっと前に標準になったので、すべてのブラウザはプレフィックスなしの標準バージョンをサポートする必要があります。一部のブラウザーは引き続きプレフィックスをサポートしていますが、どのバージョンでもサポートを終了する可能性があります。

、および他のすべての CSS スタイルにも同じことが当てはまりbox-shadowます。プレフィックスを宣言する場合は、プレフィックスのない標準バージョンも常に宣言する必要があります。

それが役立つことを願っています。

于 2013-07-31T13:27:26.123 に答える
0

問題が解決しない場合は、@Spudley が提供する回答を検討してください。

あなたができることはほとんどありません：

1) Safari のバージョンを確認する

@Adrift がコメントで指摘したように、互換性の問題である可能性があります。

2)非表示の文字が CSS コードに存在する可能性があります

この問題は頻繁に発生するため、プログラマーは問題を見つけるのに何時間も苦労します。コードを別のファイルに書き込んでみるか、隠し文字を表示する優れたエディターを使用してください。

于 2013-07-31T13:27:35.670 に答える