div+css のメモ、IE と fox_html/css_WEB-ITnose の間の多くの非互換性の問題について-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:29 PM

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7548

CakePHP チュートリアル

1382

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

＆lt; Progress＆gt;の目的は何ですか要素？ Mar 21, 2025 pm 12:34 PM

この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合

＆lt; datalist＆gt;の目的は何ですか要素？ Mar 21, 2025 pm 12:33 PM

この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

＆lt; meter＆gt;の目的は何ですか要素？ Mar 21, 2025 pm 12:35 PM

この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex

ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？ Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

＆lt; iframe＆gt;の目的は何ですかタグ？使用する際のセキュリティ上の考慮事項は何ですか？ Mar 20, 2025 pm 06:05 PM

この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

HTMLは初心者のために簡単に学ぶことができますか？ Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLでの開始タグの例は何ですか？ Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

See all articles