ブラウザ互換性の問題収集

2013年8月28日11:53:38
tableの枠線を1ピクセルに設定

    #userdi
    {
        border-collapse:collapse;border:none;
        }
    #userdi td
    {
        text-align: center;
        vertical-align: middle;
        border:1px dashed #D7D7D7;
        padding:5px 5px;
    }

 
 
 
 
2013年8月27日10:20:04
function getExplorer() {
var explorer = window.navigator.userAgent ;
//ie 
if (explorer.indexOf("MSIE") >= 0) {
alert("ie");
}
//firefox 
else if (explorer.indexOf("Firefox") >= 0) {
alert("Firefox");
}
//Chrome
else if(explorer.indexOf("Chrome") >= 0){
alert("Chrome");
}
//Opera
else if(explorer.indexOf("Opera") >= 0){
alert("Opera");
}
//Safari
else if(explorer.indexOf("Safari") >= 0){
alert("Safari");
}
}
 
 
 
 
 
 
1.buttonボタンのテキストが中央にある

.button {
	border: #0099FF 1px solid;
	height: 22px;
	cursor: pointer;
	color: #0066CC;
	background-color: #ffffff;	
        line-height:18px;/* IE*/
        width:68px;
}
.button::-moz-focus-inner{ border: 0;padding: 0;}/* Firefox*/

.button:hover {
	background-color: #E9F5FE;
}
.button:active {
	background-color: #0066CC;
	color: #ffffff;
}

2.その他の文章:IE 6、IE 7、IE 8のCSS、JS互換読む
 
3. IE6 FrameSet
解決策:/background:url(../..../images/main/article.png)right top repeat-y;                           padding-right:4px;*/やっとこのゴミ問題を解決した二、フレームワーク(frameset、frame、iframeにかかわらず)を用いてページをネストする場合、サブページの高さが予め設定された高さを超えると、スクロールバー、すなわち寸法オーバーフローが発生し、一般的に高さを超えると垂直スクロールバーが現れ、幅を超えると水平スクロールバーが現れるが、IE 6では、寸法が所定の高さ以上であれば、2つのスクロールバーが一緒に現れ、これはバグのようです.
解決方法:サブページでcssを設定するには、次のようにします.
html {overflow-y:auto!important;*overflow-y:scroll;}
この最も重要な点はoverflow-yをscrollに設定することです.このように垂直スクロールバーが強制的に現れると、水平スクロールバーは表示されませんが、幅が多すぎると、水平スクロールバーが超えてしまいます.この場合、overflow-x:hidden;これにより、ユーザーはサブページをスクロールできなくなります.
overflow-y:autoを追加する理由!important;,IE 7にはこのバグがなく、firefoxでもoverflow-yというIEのプライベート属性が認識されているため…、overflowをリセットします.
 
以上の方法で改善できる点はIE 6だけがこのBUGを持っている以上、IE 6だけに対して書けばいいhtml{_overflow-y:scroll;}下線はIE 6専用です.これにより、コードを1行節約し、効率を向上させます.