ホームページ  >  記事  >  ウェブフロントエンド  >  div+css のメモ、IE と fox_html/css_WEB-ITnose の間の多くの非互換性の問題について

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

WBOY
WBOYオリジナル
2016-06-24 12:29:42889ブラウズ

私はいつも 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