div+css のメモ、IE と fox_html/css_WEB-ITnose の間の多くの非互換性の問題について

私はいつも IE を使って Web ページを作成してきました。今日は Firefox の公式 Web サイトにアクセスし、Google プラグインを使わずにインストールしました (私はプラグインが大嫌いで、Google を使わずに Firefox ブラウザをダウンロードすることはほぼ不可能です)。中国のプラグインです!)
それを開いて見てください、わお、ついに登場しました。ff には多くの非互換性の問題があります。非互換性の問題をクリックするだけで、数十もの問題が表示されます。それらを 1 つずつゆっくり解決し、ゆっくりと検索し、最初に学習する簡単なものをいくつか整理して共有します。
1. マウスオーバーハンドの変換のための最も単純な CSS は、cursor:pointer を変更する必要があります。dw8 の自動属性には hand 属性がありません。標準のものは pointer です。
2.ff はフィルターをサポートしていません。最も一般的な半透明はサポートされていません。サポートされています。
フィルター: アルファ(不透明度=50);
不透明度: .5;
スタイル="-moz-opacity:0.5; フィルター:アルファ(不透明度=50);カーソル:ハンド;" onmouseover="this.style.MozOpacity= 1;
this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50"
3.ff は、expression_r をサポートしていません。たとえば、リンクの境界線は別途記述する必要があります。 別の css
a、エリア { blr:expression_r(this.onFocus=this.blur()) }
:focus { アウトライン: なし }
4.ff はサポートしていません。 div スクロール バーの色設定。代替品はまだ見つかりません。良い方法です。
.contentiv {
位置: 絶対; 左: 0px; 幅: 580px; 高さ: 135px; フォントファミリー:"宋体"; : ブレークオール; カラー:#6D6E71;
OVERFLOW-Y:auto;OVERFLOW-X: no;
SCROLLBAR-ARROW-COLOR: red; SCROLLBAR-TRACK-COLOR:#F6F6F6;SCROLLBAR -SHADOW-COLOR:#F6F6F6;
SCROLLBAR-DARKSHADOW-COLOR:#F6F6F6;SCROLLBAR-3DLIGHT-COLOR:#F6F6F6;SCROLLBAR-HIGHLIGHT-COLOR:#F6F6F6;
}
これはffでは全く効果がありません。
5.ie はテキストの下の水平線の境界線の幅を示します: 0px 0px 1px 0px; ff ではテキストの上に表示されます。 （マニュアルを確認しましたが、解決策が見つかりませんでした。不思議な感じがします～～ ffの耐障害性が低すぎることが判明しました。これは、幅: 186px; 高さ: 0px; が原因であることがわかりました。実際には、 a:haver は優れた属性を継承しており、さまざまなスタイルを定義するだけで、標準化された簡潔な Web ページを作成するのに役立ち、css の理解が深まり、css)
.onelinksdiv a を提供できるようです。 :hover {
display: block;border-style: Solid;color: #ff0000;border-width: 0px 0px 1px 0px;

}
//以下の書き方は ie では正常ですが、 ff
では間違っています。 onelinksdiv a:hover {
表示: ブロック;ボーダー: #ff0000 ボーダー幅: 0px 0px 1px 0px;
幅: 186px;高さ: 0px; フォントサイズ: 14px;テキスト整列: right ;
}
関連資料:
border-width:border-top-width border-right-width border-bottom-width border-left-width;
p#fourborders
{
border-width:thick Medium Thin 12px ;
}
4 つの値が定義されている場合、これらの 4 つの値は、上、右、下、左の境界線の幅の値になります (上の境界線から開始して反時計回りの順に移動します)。次の定義
p#fourborders
{
border-top-width:thick;
border-right-width:medium;
border-bottom-width:thin;
border-left-width:12px;
}
6.ffはサポートされていません スクロール属性は overflow:hidden; を定義する必要があり、本文の下ではなく HTML タグの下にある必要があります
html{
overflow:hidden;
}
7.ffデータ アイランド バインディングをサポートしていません データは IE ではロードできますが、Firefox ではデータをロードできません。コンテンツ行のテキストが多すぎるため、その行を分割することはできず、ロードすることもできません。ただし、数語を削除しただけでは同じことはできません。
8.style="word-break:break-all" Web ページ内のセルの内容が 1 行を超える場合、IE ブラウザーで定義された改行スタイルは通常使用できますが、Firefox スタイルではサポートされません。 ="word-break:break-all" は MS 拡張機能の IE 固有の属性であり、W3C 標準になっていないため、Firefox はまだサポートできません。ただし、MS はこれを W3C に提出しており、W3C の CSS3 候補計画にも見られます。 W3C によって CSS3 標準として最終決定された後、Firefox がこのプロパティをサポートできることを願っています。その前に
style="table-layout:fixed;word-wrap:break-word"を試してみてください（英語の場合は正常に折り返すことができません）
9. 現在、FF2.0はIEをサポートしていません。アンカー
次のような記述はサポートされていません: 戻る
W3C 構文によれば、 タグは常に href アドレスを検索し、そこにジャンプします。onclick イベントは ### アドレスと競合します。
Firefox を IE の一部の要素属性と互換性を持たせるために、Firefox がスペースに敏感であることを偶然発見しました:
//无空格，锚点无作用
锚点的写法又十分讲究，比如，Firefox不支持锚点，得加上id=#1
静态同页面引用时必须这样写：，就不行，动态页面要用JS
后遗症来了，考虑到鼠标样式和浏览器兼容又开始折腾：
//不兼容
//不兼容
//没有{...},属于脚本的非法书写
//没照顾到自定义系统鼠标样式的用户
//状态栏会显现，href有多长显示多长
//我用的
10.ff火狐下面不支持document.all属性的，必需用document.getElementById('idName');
以下是我的动画切换效果，在ie下正常，到了火狐里面就不动了，修改后可以切换图片但渐隐渐现的效果就没有了。原因是火狐不支持滤镜filter,只好用半透明的div来实现了。

function playcompanyimg()
{
window.setInterval('changecompanyimg();', interval);
}
function changecompanyimg()
{

//if (document.all)
//{

　　 number = Math.floor(Math.random() * image.length);
idtemp.src=image[number];
//alert(number+" ii "+idtemp.src)

//alert(do_transition);
//document.all.companyimg.style.filter="progid:DXImageTransform.Microsoft.Fade(duration=2,overlap=0.4)";

var companyimgidtmep = document.getElementById('companyimg');
companyimgidtmep.style.filter="progid:DXImageTransform.Microsoft.Fade(duration=1,overlap=1)";
companyimgidtmep.filters[0].Apply();
companyimgidtmep.filters[0].Play();
//}
}
参考资料：核心：FILTER:revealTrans(duration=1,transition=23); 一个IE滤镜，
在其它的非IE浏览器虽然不支持这个滤镜，但是支持透明滤镜的，你可以分一下，IE下继续使用你这个效果，而在非IE浏览器下用透明滤镜：
style.opacity
opacity = 0.5 CSS3
style.MozOpacity
-moz-opacity: 0.5 Mozilla 里等同上面这个滤镜 这个滤镜也适用于Netscape
style.KHTMLOpacity
-khtml-opacity: 0.5 Safari 里的透明滤镜。
IE：
obj.filters.alpha.opacity
to meizz(梅花雪)
其实我想过你那个问题的。但是透明 opacity 这个他不是一个渐变的过程。
一般这种图片过度特效最多持续一秒把，最多最多两秒 duration=2
超过2秒就很累赘，喧宾夺主了。
在2秒钟里面实现
g_img.style.filter="alpha(opacity="+i+")" 透明度的变化是比较累赘的事情。
要用 window.setInterval 改变 i 的值， 而且还要调用几十上百次window.setInterval
才能看到效果。
这样的话，我觉得得不赔失，是为了特效而特效了
另外一种考虑是，毕竟非ie浏览器是少数，即使在ff下 没有图片过度特效，其实也没什么，
还是很流畅，不过就是看不到ie里面的美而已。
11.ff下链接的onclick事件不起作用

我们做什么

在ie下没有问题，在ff下点击了没有反应。作了多次尝试，换成onclick="display('whatwedo')"仍然不行，后来通过多次检查，搜索仍然找不到门路，最后采用惯用的方法－－一步一步alert();出来看效果，原来他妈的是一个id的值写错了，但奇怪的是ie下面没有关系？是 ie的容错内容太强了还是火狐的容错内容太差了？不过还是喜欢火狐的严谨和标准哈。可以让人发现不少深层次的东西。哈哈。
12.ff中div定位不能通过js初始化 必须先设定值并且要设定度量单位 top:80px;left:212px;
13.ff不能用.click();方法打开链接，终于暂时性的解决了

hello

hello2

hello3触发事件放在href="javascript:onclick =test2(1)" 里面ff无效

hello3

《2》

。

DIV + CSS デザイン IE6、IE7、FF 互換性
DIV + CSS Web レイアウト これはトレンドであり、私もこの傾向に従い始めています。 ただし、DIV + CSS の Web サイトデザインを使用する場合は、CSS の問題に注意する必要があります。さまざまなブラウザとのスタイルの互換性、特に DIV+CSS を完全に使用して設計された Web ページの場合、IE6 IE7 FF と CSS スタイルの互換性にもっと注意を払う必要があります。そうしないと、Web ページが混乱する可能性があります。私はこれらのことに圧倒されることが多いので、最近の自分の理解と経験を組み合わせて、インターネットでいくつかの情報を検索し、いくつかの情報をまとめました。その中には、まだ使用していないものや、他のものから直接貼り付けたものもあります。エラーがあるかどうかはわかりません。今後使用するときに少しずつ変更していきます。

ブラウザの互換性について: 異なるブラウザを使用する場合。 IE6) 同じ Web サイトやページにアクセスすると、このブラウザでは表示が正常に表示されるが、CSS を記述するときに非常にイライラすることがあります。このブラウザでは問題が発生しましたが、別のブラウザで新たな問題が発生しました。わかりました。では、あなたの非互換性を利用して、それぞれに CSS を書いて、それぞれに独自のタスクを実行させます。さあ、もう気を緩める時間です (笑)。

さて、本題に取り掛かりましょう

1. ! important (機能制限あり)
IE7 の ! important サポートにより、 ! important メソッドは IE 6 のみと互換性があります (記述に注意してください。宣言位置に注意してください)。事前に確認する必要があります。)
例:

#example {
width: 100px ! important;
width: 200px;
}

2 つ目は、CSS HACK メソッド (初心者は参照してください。専門家はスルーしてください)

最初に知っておくべきことは次のとおりです:

すべてのブラウザーの共通の高さ: 100px;
IE7 固有の高さ: 100px;
IE6、IE7 の共通の高さ: 100px; 、FF 共有高さ: 100px !重要

例:

#example { height:100px; }

*+html #example { height:300px;
次の方法は比較的簡単です

いくつかの例を示します:

1, IE6 - IE7+FF

#example {
height:100px;
_height:200px;
実際には、これも行うことができます上記の最初の方法
#example {
height:100px !重要 ;
height:200px;
2, IE6+IE7 - FF

#example {
*height:200px;

3、IE6+FF - IE7

#example {
height:100px;
*+height:200px;
}
4、IE6 IE7 FF

#example {
height:100px; : 200px;
*+height:300px;
または:
height:100px;
_height:200px;

逆にしないと、すべての努力が無駄になってしまいます。ブラウザがプログラムを解釈するとき、名前が同じ場合、変数に値を代入するのと同じように、前の名前を後の名前で上書きするため、一般的なものを前に置き、より特殊な名前を置きます。 、後者

コード4の説明:
コードを読むと、最初の行の height: 100px; は、IE6 IE7 FF はすべて 100px で表示されます
2 行目になると、*height: 300px; になります。この属性は認識されず、IE6 IE7 は認識するため、FF は引き続き 100px を表示しますが、IE6 と IE7 は 1 行目で取得した height 属性を上書きし、どちらも 300px を表示します
3 行目では、_height:200px; IE6 のみが認識します。 IE6は2行目で取得した高さを上書きし、最終的に200pxで表示します
このように、3つのブラウザは独自の高さ属性を持っているので、それぞれをいじってみましょう

それでも理解できない場合は、壁にぶつかったか、または私がやります！でもあなたがやったほうがいいです。

ああ、言及するのを忘れるところでした:
*+html IE7 との互換性では、HTML の先頭に次のステートメントが必ず必要です:



3. IE 固有の条件付きコメントを使用する





;












貌似要编三套css，我还没用过，先粘过来再说

IE的if条件Hack

1. 除IE外都可识别
2.
3.
4.
5.
6.
7.
8.
9.
10.
11. 注:gt = Great Then 大于
> = > 大于号
lt = Less Then 小于
gte = Great Then or Equal 大于或等于
lte = Less Then or Equal 小于或等于

四、css filter的办法(据作者称是从国外某经典网站翻译过来的说)

新建一个css样式如下：

#item {

width: 200px;

height: 200px;

background: red;

}

新建一个div,并使用前面定义的css的样式：

some text here

在body表现这里加入lang属性,中文为zh：



现在对div元素再定义一个样式：

*:lang(en) #item{

background:green !important;

}

这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式：

#item:empty {

background: green !important

}

:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。


五、FLOAT闭合（clearing float）

　　网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合，这也是div无法自适应高度的一个原因。如果父div没有设float而其子div却设了float的话,父div无法包住整个子DIV，这种情况一般出现在一个父DIV下包含多个子DIV。解决办法：

１、给父DIV也设上float(不要骂我，我知道是废话)

2、在所有子DIV后新加一个空DIV(不推荐，有些浏览器可以看见空DIV产生的空隙)

比如：

.parent{width:100px;}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}

3、万能 float 闭合

将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.
代码:


:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦。

4、overflow:auto（刚看到的，极力推荐）

只要在父DIV的CSS中加上overflow:auto就搞定。

举例：

.parent{width:100px;overflow:auto}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}

作者原话：原理是，外围元素之所以不能很好的延伸，问题出在了overflow上，因为overflow不可见（见W3C的解释）。现在只要将给外围元素添加一个“overflow:auto”，就可以解决问题，结果是除了IE，真的可以解决。下来就要解决IE的问题了，再加上“_height:1%”，这个问题就完全解决了。

我试了一下，其实不加"_height:1%“在IE下也行，留着吧。

六、需要注意的一些兼容细节

1, FF下给 div 设置 padding 后会导致 width 和 height 增加(DIV的实际宽度=DIV宽+Padding), 但IE不会.

解决办法：给DIV设定IE、FF两个宽度，在IE的宽度前加上IE特有标记" * "号。

2, 页面居中问题.

body {TEXT-ALIGN: center;} 在IE下足够了，但FF下失效。

解决办法：加上"MARGIN-RIGHT: auto; MARGIN-LEFT: auto; "

3, 有的时候在IE6上看见一些奇怪的间隙，可我们高度明明设好了呀。

解决办法：试试在有空隙的DIV上加上"font-size:0px;"

4, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.

5, 浮动IE6产生的双倍距离

#box{ float:left;
width:100px;
margin:0 0 0 100px;
}
这种情况之下IE6会产生200px的距离

解决办法：加上display:inline，使浮动忽略

这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果

6 页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。

解决办法：为了让这一命令在IE上也能用，可以把一个

放到 标签下，然后为div指定一个类：
然后CSS这样设计：
#container{
min-width: 600px;
width:e­xpression(document.body.clientWidth }
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7、UL和FORM标签的padding与margin

ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值。FORM标签在IE中,将会自动margin一些边距,而在FF中margin则是0；

解决办法：css中首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,后面就不会为这个头疼了.

8 ,DIV浮动IE文本产生3象素的bug

下面这段是我在网上粘过来的

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//这句是关键
}
HTML代码

上記のコードに関して、私の理解は次のとおりです:

まず、right が wi​​dth 属性を定義している限り、FF
2 番目に、両方の幅がパーセンテージで定義されている場合でも、間違いなく 2 行で表示されます。すべて 100% の場合でも、IE では 1 行で表示されます。したがって、上記のいわゆる「この文がキーです」は、幅が数値として定義されていない限り、追加せずに同じ行に表示されたままになります。

つまり、上記のコードは実際には、少なくとも FF ではほとんど役に立ちません。実際、IE または FF では、左の幅のみを定義する限り、右の幅を定義しなくても成功します。ただし、この場合、親 DIV ボックスには実際には 2 つの子 DIV LEFT と RIGHT が含まれません。 . 上記で説明した最初の方法を使用して解決できます。最も簡単な方法は、float:left を RIGHT に追加することですが、これは本当に面倒です。

9, truncation ellipsis

.hh { -o-text-overflow:ellipsis;
white-space:
nowrapoverflow:hidden;
これは長さを超えた後に発生します余分なテキストは自分で削除し、省略記号で終了します。テクノロジーは優れたテクノロジーであり、多くの人がそれをランダムに使用することを好みますが、Firefox はサポートしていないことに注意してください


div+css のメモ、IE と fox の間の多くの非互換性の問題について