ブラウザの互換性: Css_html/css_WEB-ITnose

この記事は、以前のエッセイ「ブラウザの互換性: Javascript」に多少関連していますが、ブラウザの互換性を解決し、同様の問題に遭遇した同僚を助けることを目的として、以下にまとめていきます。ブラウザの互換性を解決する事例をさらに増やし、一緒に話し合ってください。

最近、同社の BS 製品にはブラウザの互換性を求める声が増えていますが、実際には、具体的なユーザーの状況は私にとっては関心のあることではありません。つまり、IE6 ～ IE10 を中心に作業が行われています。現時点では)、Chrome、FireFox の主要なメインストリーム ブラウザで実行されており (ちなみに、Firefox はもはやメインストリームとはみなされていません)、360 ブラウザと Sogou ブラウザのユーザーは依然として多くあります。プラットフォームの管理者として、私が現在直面している問題は、アートとユーザー エクスペリエンスの両方において次のとおりです。いくつかのコントロールのコーナー効果を例として説明します。

1. Form または Dom スクロール バー スタイルのレンダリング効果

ほとんどの人は、ブラウザのスクロール バーは素朴すぎるように見えるため、ニーズに応じて美化する必要があると考えています。 IE ブラウザにはスクロール バーのスタイルを設定できるいくつかのスタイルがありますが、それらは色の単純な調整にすぎず、これらのプロパティは IE ブラウザのみをサポートしており、Webkit ベースのブラウザとは互換性がないため、別のプロパティを見つける必要があります。 WebKitをターゲットにする方法。最後に、JavaScript、CSS、画像を使用してカスタム スクロール バーを実装する別のソリューションがあります。これについては次回説明します。

スクロール バーに関しては、スタイルに加えて、機能面でも注意すべき点がいくつかあります。いくつかの場所では、overflow:hidden を使用してスクロール バーを使用してはなりません。いくつかの場所では、垂直スクロール バーまたは水平スクロール バーのみが必要です。 /y: 非表示; どちらも overflow:auto が必要です。

1. スクロール バーの構造図とオンライン プレビュー効果

図 1

オンライン プレビューと設定スクロール バー スタイル アドレス: http://www.dengjie.com/temp/scroller.swf

2. IE の下スクロールバースタイルのプロパティを設定する

scrollbar-arrow-color: color; /*三角箭头的颜色*/scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/scrollbar-highlight-color: color; /*滚动条的高亮颜色（左阴影？）*/scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/scrollbar-track-color: color; /*立体滚动条背景颜色*/scrollbar-base-color:color; /*滚动条的基色*/

.ScrollBar {  scrollbar-arrow-color:  #000000;  scrollbar-base-color: #71b2dc;  scrollbar-face-color: #71b2dc;  scrollbar-shadow-color: #71b2dc;  scrollbar-highlight-color: #71b2dc;  scrollbar-3dlight-color: #88b8ed;  scrollbar-darkshadow-color: #88b8ed;  scrollbar-track-color:#bde6ff;}<br />该样式可以引用到任意需要滚动条样式的Box模型中，以下是效果图

図2

3. Chromeでスクロールバースタイルのプロパティを設定する

::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的::-webkit-scrollbar-button 滚动条两端的按钮::-webkit-scrollbar-track  外层轨道::-webkit-scrollbar-track-piece  内层滚动槽::-webkit-scrollbar-thumb 滚动的滑块::-webkit-scrollbar-corner 边角::-webkit-resizer 定义右下角拖动块的样式

/*---webkit 滚动条样式--*/  .ScrollBar::-webkit-scrollbar-thumb{background-color:#71b2dc;  height:50px;outline-offset:-1px; outline:1px solid #88b8ed;  -webkit-border-radius:0px;  }.ScrollBar::-webkit-scrollbar-thumb:hover{background-color:#bde6ff;height:50px; -webkit-border-radius:0px;}.ScrollBar::-webkit-scrollbar{width:17px; height:17px;}  .ScrollBar::-webkit-scrollbar-track-piece{background-color:#bde6ff;border:none;-webkit-border-radius:0;}.ScrollBar::-webkit-scrollbar-button {width:16px;height:16px;background-color:#bde6ff;outline:1px solid #88b8ed;outline-offset:-1px; font-size:0px;}.ScrollBar::-webkit-scrollbar-button:vertical:decrement{border-left:8px dashed  transparent;border-right:8px dashed  transparent;  border-bottom:7px solid #000;height:12px;}.ScrollBar::-webkit-scrollbar-button:vertical:increment{border-left:8px dashed  transparent;border-right:8px dashed  transparent;  border-top:7px solid #000;height:12px;}.ScrollBar::-webkit-scrollbar-button:horizontal:decrement{border-top:8px dashed  transparent;border-bottom:8px dashed  transparent;  border-right:7px solid #000;width:12px;}.ScrollBar::-webkit-scrollbar-button:horizontal:increment{border-top:8px dashed  transparent;border-bottom:8px dashed  transparent;  border-left:7px solid #000;width:12px;}.ScrollBar::-webkit-scrollbar-corner {background-color:#bde6ff;}<br />这里是纯样式，所以没有用图片，其实webkit滚动条样式是可以用图片的，但由于项目自身原因，需要与ie下的效果保持一致，效果图如上图2。

その他のプレビューエフェクト: http://almaer.com/scrollbar/index.html

4. Firefox は現在、スクロール バー スタイルをサポートする CSS を見つけません

2. ボックス モデルの影と丸い角の効果

.box{　　/*阴影*/　　box-shadow: 3px 3px 5px #ccc;                 /* IE */　　-moz-box-shadow: 3px 3px 5px #ccc;        /* firefox */　　-webkit-box-shadow: 3px 3px 5px #ccc;    /* webkit */　　/*圆角*/　　<br />　　<br />   border:1px solid #ccc;<br />　　border-radius: 4px;　　-webkit-border-radius: 4px;　　-moz-border-radius: 4px;}           

box-shadow 4 つのパラメータ: x 軸オフセット、y 軸オフセット、ぼかし値、影の色

4 方向に影の効果を与え、異なる色でレンダリングしたい場合、その効果は次のようになります。図 4 のコードは次のとおりです。

.box {    width:300px;    height:300px;    background-color:#fff;        /* 设置阴影 */    -webkit-box-shadow:1px 1px 3px green, -1px -1px 3px blue;    -moz-box-shadow:1px 1px 3px green, -1px -1px 3px blue;    box-shadow:1px 1px 3px green, -1px -1px 3px blue;}

図 3

ただし、CSS3.0 より前のブラウザではシャドウ効果がサポートされていません。CSS2.0 と互換性を持たせたい場合は、を使用する必要があります。 javascript を使用してそれを実現する方法については、前のエッセイを参照するか、背景を設定するために png 画像を使用します。