タグ付けされた質問 「cross-browser」

クロスブラウザー開発とは、さまざまなWebブラウザーやレンダリングエンジンで機能するように、Webサイト、Webアプリケーション、ライブラリ、またはコンポーネントを構築することです。

8
（マイナス）スクロールバーなしで画面幅を取得するにはどうすればよいですか？
要素があり、垂直スクロールバーなし（！）の幅が必要です。 Firebugはボディの幅が1280pxであると教えてくれます。 これらはいずれもFirefoxで正常に動作します。 console.log($('.element').outerWidth() ); console.log($('.element').outerWidth(true) ); $detour = $('.child-of-element').offsetParent(); console.log( $detour.innerWidth() ); それらはすべて、私が探している値である1263pxを返します。 ただし、他のすべてのブラウザでは1280pxが表示されます。 垂直スクロールバーなし（！）で全画面幅を取得するクロスブラウザ方法はありますか？
5
データリストラベルを表示しますが、実際の値を送信します
現在、HTML5<datalist>要素はほとんどの主要なブラウザー（Safariを除く）でサポートされており、入力に提案を追加するための興味深い方法のようです。 ただし、value属性の実装との内部テキストの間にはいくつかの矛盾があるようです<option>。例えば： <input list="answers" name="answer"> <datalist id="answers"> <option value="42">The answer</option> </datalist> これは、ブラウザによって処理が異なります。 ChromeとOpera： FireFoxとIE11： いずれかを選択すると、入力には内部テキストではなく値が入力されます。ドロップダウンと入力にテキスト（「回答」）のみを表示したいのですが、42送信時に値を渡します。selectます。 ドロップダウンリストに<option>sのラベル（内部テキスト）を表示させvalue、フォームの送信時に属性を送信させるにはどうすればよいですか？
11
DOMノードの文字列表現を取得する
Javascript：ノード（要素またはドキュメント）のDOM表現があり、その文字列表現を探しています。例えば、 var el = document.createElement("p"); el.appendChild(document.createTextNode("Test")); 収まるはずです： get_string(el) == "<p>Test</p>"; 単純なものは見当たらないという強い気持ちがありますが、IE、FF、Safari、Operaで機能するメソッドが見つかりません。したがって、outerHTMLはオプションではありません。
8
クロスオリジンのpostMessageはIE10で壊れていますか？
些細なpostMessage例を機能させようとしています... IE10 ウィンドウ/タブ間（対iframe） 起源を超えて これらの条件のいずれかを削除すると、物事はうまくいきます:-) しかし、私の知る限りでは、ウィンドウ間はpostMessage、両方のウィンドウがオリジンを共有している場合にのみIE10で機能するように見えます。（まあ、実際-そして奇妙なことに-振る舞いはそれよりも少し寛容です：ホストを共有する2つの異なるオリジンも機能しているようです）。 これは文書化されたバグですか？回避策やその他のアドバイスはありますか？ （注：この質問は問題に触れていますが、答えは10ではなくIE8とIE9についてです） 詳細+例... ランチャーページのデモ <!DOCTYPE html> <html> <script> window.addEventListener("message", function(e){ console.log("Received message: ", e); }, false); </script> <button onclick="window.open('http://jsbin.com/ameguj/1');"> Open new window </button> </html> ローンチしたページのデモ <!DOCTYPE html> <html> <script> window.opener.postMessage("Ahoy!", "*"); </script> </html> これはhttp://jsbin.com/ahuzir/1で動作します-両方のページが同じオリジン（jsbin.com）でホストされているためです。しかし、2ページ目を他の場所に移動すると、IE10で失敗します。
9
ブラウザでJavascriptを介して画像を圧縮する方法は？
TL; DR; アップロードする前に、画像（主にjpeg、png、gif）をブラウザ側で直接圧縮する方法はありますか？JavaScriptでこれができると確信していますが、それを実現する方法が見つかりません。 これが私が実装したい完全なシナリオです： ユーザーが私のウェブサイトにアクセスし、input type="file"要素を介して画像を選択し、 この画像はJavaScriptを介して取得されます。正しいファイル形式、最大ファイルサイズなど、いくつかの検証を行います。 すべて問題がなければ、画像のプレビューがページに表示されます。 ユーザーは、画像を90°/ -90°回転したり、事前定義された比率に従ってトリミングしたりするなどの基本的な操作を実行できます。または、ユーザーは別の画像をアップロードして手順1に戻ることができます。 ユーザーが満足すると、編集された画像は圧縮され、ローカルに「保存」されます（ファイルには保存されませんが、ブラウザのメモリ/ページに保存されます）。 ユーザーは、名前、年齢などのデータをフォームに入力します。 ユーザーが[完了]ボタンをクリックすると、データと圧縮画像を含むフォームがサーバーに送信されます（AJAXなし）。 最後のステップまでの全プロセスはクライアント側で実行する必要があり、最新のChromeとFirefox、Safari5以降およびIE8以降と互換性がある必要があります。可能であれば、JavaScriptのみを使用する必要があります（ただし、これは不可能であると確信しています）。 今は何もコーディングしていませんが、すでに考えています。ファイルAPIを介してローカルでファイルを読み取ることができます。画像のプレビューと編集はCanvas要素を使用して行うことができますが、画像圧縮部分を行う方法が見つかりません。 html5please.comとcaniuse.comによると、これらのブラウザのサポートは非​​常に困難です（IEのおかげで）が、FlashCanvasやFileReaderなどのポリフィルを使用して行うことができます。 実際、目標はファイルサイズを小さくすることなので、解決策として画像圧縮を考えています。しかし、アップロードされた画像が毎回同じ場所で私のWebサイトに表示されることはわかっており、この表示領域のサイズ（200x400など）も知っています。そのため、これらのサイズに合わせて画像のサイズを変更し、ファイルサイズを小さくすることができました。この手法の圧縮率はどうなるかわかりません。 どう思いますか ？何かアドバイスはありますか？JavaScriptでブラウザ側の画像を圧縮する方法を知っていますか？返信ありがとうございます。
4
Iframeコンテンツが読み込まれたときの検出（クロスブラウザー）
iframeとそのコンテンツが読み込まれたが、運が悪いときを検出しようとしています。私のアプリケーションは、親ウィンドウのテキストフィールドに入力を取り、iframeを更新して「ライブプレビュー」を提供します iframeの読み込みイベントがいつ発生するかを検出するために、次のコード（YUI）から始めました。 $E.on('preview-pane', 'load', function(){ previewBody = $('preview-pane').contentWindow.document.getElementsByTagName('body')[0]; } 'プレビューペイン'はiframeのIDで、YUIを使用してイベントハンドラーをアタッチしています。ただし、（iframeの読み込み時に）コールバックで本文にアクセスしようとすると失敗します。イベントハンドラーの準備が完了する前にiframeが読み込まれるためです。このコードは、iframeを生成するphpスクリプトをスリープさせることによってiframeの読み込みを遅らせると機能します。 基本的に、iframeが読み込まれ、ドキュメントの準備ができたことを検出するために、ブラウザー間で正しいアプローチは何ですか？
7
「width：-moz-fit-content;」のcssクロスブラウザ値はありますか？
いくつかのdivを中央に配置し、同時にコンテンツの幅に合わせる必要があります。 私は今それをこのようにやっています： .mydiv-centerer{ text-align: center; .mydiv { background: none no-repeat scroll 0 0 rgba(1, 56, 110, 0.7); border-radius: 10px 10px 10px 10px; box-shadow: 0 0 5px #0099FF; color: white; margin: 10px auto; padding: 10px; text-align: justify; width: -moz-fit-content; } } さて、最後のコマンド「width：-moz-fit-content;」あるまさに私が必要なもの！ 唯一の問題は..Firefoxでのみ動作します。 「display：inline-block;」も試してみました。、しかし、これらのdivがdivのように動作する必要があります。つまり、次のすべてのdivは、前のdivの下にあり、インラインではありません。 可能なクロスブラウザソリューションを知っていますか？
2
textareaの下の余分なスペースは、ブラウザによって異なります
textareaタグの下に余分なスペースがあります。さまざまなブラウザで1〜4ピクセル。マークアップは非常に単純です。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style> body { margin: 0; padding: 0; } .main { background-color: red; } textarea { background-color: gray; resize: none; margin: 0; border: 0 none; padding: 10px; height: 50px; overflow: hidden; } </style> </head> <body> <div class="main"> <textarea></textarea> </div> </body> …
9
Modernizrを使用してIEを検出する正しい方法は？
Modernizr JSライブラリを使用して、いくつかのブラウザプロパティを検出し、表示するコンテンツと表示しないコンテンツを決定したいと思いました。 HTML5とSWFの両方を出力するPano2VRというアプリがあります。iOSデバイスユーザーにはHTML5が必要です。 ただし、IEはこの「HTML5」出力をまったくレンダリングしません。それらの出力はCSS33D変換とWebGLを使用しているようですが、IE9では明らかにサポートされていないものが1つ以上あります。 したがって、それらのユーザーのために、Flashバージョンを表示する必要があります。私はIFRAMEを使用することを計画しており、Modernizrスクリプトまたはdocument.writeを介してSRCを渡し、ブラウザーに応じて正しいIFRAMEコードを書き出します。 これらすべてが、Modernizrを使用してIEを単純に検出するかIEを検出しないかを決定する方法につながりますか？または、CSS 3D変換を検出しますか？ または、これを行う別の方法はありますか？
7
ハイチャートチャートオプションbackgroundColor：IE8で黒を表示する「透明」
HighchartsbackgroundColor:'transparent'黒を表示するチャートオプションIE 8 histogram = new Highcharts.Chart({ chart: { renderTo: 'histogram', defaultSeriesType: 'bar', backgroundColor:'transparent' } これはI.E 9他では問題なく動作しますが、IE 8とSafariでは失敗します。理由は誰にもわかりませんか？
7
Uncaught TypeError：Object.valuesは関数JavaScriptではありません
以下のような単純なオブジェクトがあります。 var countries = { "Argentina":1, "Canada":2, "Egypt":1, }; 2つの配列を作成する必要があります。最初の配列は、オブジェクトのすべてのキーの配列です。私はこの配列を次の方法で作成しました： var labels = Object.keys(countries); これはうまく機能します。私は国の配列を取得します。値から配列を作成しようとすると... var labels = Object.values(countries); このエラーが発生します： Uncaught TypeError: Object.values is not a function JavaScript 何が間違っているのかわかりません。私はconsole.log countries前と後に、私は宣言labelsとオブジェクトは同じまま。どうすれば正しく使用できObject.values()ますか？
3
Firefoxでevent.srcElementを機能させるにはどうすればよいですか？それはどういう意味ですか？
私の会社のウェブサイトに、1つのウェブページをFirefoxと互換性のないものにするifステートメントがあります if(event.srcElement.getAttribute("onclick") == null){ ...code.. document.mainForm.submit(); } ifステートメントの条件と、forefoxでの動作についてコメントしました。私の質問は、event.srcElement.getAttribute（ "onclick"）とは何ですか、それは重要です、それは将来問題を引き起こすでしょうか？また、Firefoxで動作するように条件を置き換えることができる同様の何かがありますか？ 編集： function gotoRDManagerPT(PTId, bDDetailId) { if(!proceed()) return false; var target = event.target || event.srcElement; if(event.target.getAttribute("onclick") == null) { document.mainForm.displayRDManagerPT.value = "true"; document.mainForm.PTId.value = PTId; document.mainForm.bDDetailId.value = bDDetailId; document.mainForm.submit(); } }
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.