問題タブ [css]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - IE7: メニューの上のヘッダー
IE7で困っています。IMG であるヘッダーがあります。その下にメニューを表す div があり、間にスペースを入れずに互いに接続する必要があります。どちらも幅1000pxです。Opera と FireFox では、ヘッダーとメニューがきれいに関連付けられています。ただし、IE7 では、メニュー DIV と IMG の間に小さなスペースがあります。IMG でパディングとマージンを明示的に定義しようとしましたが、うまくいきません。以前にこの問題が発生したことがあるので、IE7 の癖のようです。
私のHTMLコード:
html - IE7 HTML/CSS margin-bottom バグ
シナリオは次のとおりです。
margin-bottom が 19px のテーブルがあります。その下には、いくつかのフィールドセットを含むフォームがあります。そのうちの1つは右に浮かんでいます。問題は、IE7 で margin-bottom が完全な 19px を取得していないことです。私は考えられる IE7 の css/margin/float のバグをすべて調べ、解決策を試しましたが、うまくいきませんでした。私はしばらくの間グーグルで検索してきましたが、助けになっているものは何も見つかりません。
これが私が試したことです。
- スタイルのない div でフォームまたはフィールドセットをラップします。明らかな変化なし。
- テーブルの margin-bottom を削除し、代わりにそれを div でラップし、19px の padding-bottom を指定します。明らかな変化なし。
- テーブルの margin-bottom を削除し、固定高さ 19px の div を追加します。明らかな変化なし。
- テーブルとフィールドセットの間にクリアを置きます。
私が忘れているものがいくつかあることは知っていますが、それらは私が最近試したことです. これは各フィールドセットで発生します。
リセット スタイル シートを使用しており、xhtml トランジショナル Doctype を使用しています。
編集: IE7 Web 開発者ツールバーと Firebug もあります。両方のブラウザーのスタイル情報には、margin-bottom: 19px; があることが示されています。しかし、明らかに IE7 向けではありません。
css - CSSドロップダウンメニュー-「最高」?最も機能が豊富ですか?
私は、構築しているサイトにドロップダウンカスケードメニューを実装しなければならないという不幸な立場にあります。私は、主にCSSベースであり、ネストされたULとLIの単純なセットで機能するSuckerfishスタイルのソリューションを探しています。
Son of Suckerfishは道のりのようですが、マウスを離すとすぐに消えてしまう方法は好きではありません。調整が困難なユーザーは、サイトをナビゲートするのに悪夢を見るでしょう(または単に気にしないでください。これは企業サイトなので、おそらく私が実装したものを何でも使用しなければならない人もいます)。
私が必要とさえ考えていなかったきちんとした機能は大歓迎ですが、私が探している2つの主要な要素は次のとおりです。
- ネストされたUL/LI構造を使用したマルチレベル
- 追加のJavaScriptによって提供されている場合でも、メニューが「マウスアウト」されたときに消えるまでのわずかな(おそらく構成可能ですか?)遅延。
html - Web 上のフォント
Web 開発者が利用できるフォントのコレクションは、憂鬱なほど限られています。ウェブサイトと一緒にフォントを配布する方法として、TrueDoc についてずっと前に読んだことを覚えていますが、衰退しているようです。誰かがこれを使用したことがありますか、または同様のものを使用しましたか? 十分なブラウザでサポートされていますか? 良い解決策がありませんか?
責任ある Web 開発者は、Windows でのみ利用可能なフォント (特にVista でのみ利用可能なフォント) を使用したり、少なくとも大部分のブラウザーでサポートされていない技術を使用したりしないことに注意してください。
更新:何人かが指摘しているように、あなたが使用している特定のフォントを持っていない人のために代替フォントのリストを提供することに何の問題もありません。実際、私は常にこれを行っており、これが間違っていると示唆するつもりはありません。
私の質問の言い回しは悪かったのですが、私が言いたかったのは、デザイナーはクライアントが何を利用できるかについてあまり多くの仮定を立てるべきではないということです。自分の好みの設定を使用しているユーザーだけでなく、すべてのユーザーがサイトをどのように見るかを計画する必要があります。
css - CSS をマージするためのツールはありますか?
プログラムでマージしたいCSSセレクターが重複しているCSSファイルがいくつかあります(一方のファイルをもう一方のファイルの最後に追加するだけではありません)。これをオンラインで行うツールはありますか?それともFirefoxの拡張機能ですか?
css - CSSスケルトンを生成するためのツール?
私のHTMLはすべてマークアップされており、CSSを雨に降らせる準備ができています。問題は、私が始めることができるように、私が戻って私のすべてのIDとクラス名が何であるかを見つけなければならないということです。私が必要としているのは、HTMLを解析し、スタイル設定の準備ができているすべての可能な要素を含むスタイルシートを吐き出すツールです(おそらくいくつかのデフォルトでも)。そのようなツールは存在しますか?
html - iFrame のベスト プラクティス
私がデザインしているサイト用に、高解像度の JavaScript を多用した大きなイメージ バナーがあります。iframe を使用して読み込み時間を 1 回だけにすることについて、みんなの意見はどうですか? iframe に代わる CSS はありますか?
サイトをプレビューしてみてください。
それは非常に進行中の作業です。
javascript - -moz-border-radius のサポートを確認する最良の方法
私が現在取り組んでいる Web プロジェクトには、これらの気の利いた丸みを帯びたコーナーが必要でした。
画像ファイルのリクエストを最小限に抑えるために、CSS ではなく JavaScript を使用してそれを達成しようと考えました (はい、必要なすべての角の丸い形状を 1 つの画像に組み合わせることが可能であることはわかっています)。その場で背景色をかなり変更できるようにします。
私はすでにjQueryを利用しているので、優れた角丸プラグインを調べたところ、試したすべてのブラウザーで魅力的に機能しました。しかし、開発者として、もう少し効率的にする機会があることに気付きました。スクリプトには、現在のブラウザーが Webkit 角丸 (Safari ベースのブラウザー) をサポートしているかどうかを検出するためのコードが既に含まれています。その場合、div のレイヤーを作成する代わりに生の CSS を使用します。
-moz-border-radius-*
ブラウザが Gecko 固有のプロパティをサポートしているかどうか、サポートしている場合はそれを利用するために、同じようなチェックが実行できれば素晴らしいと思いました。
Webkit サポートのチェックは次のようになります。
しかし、それはうまくいかなかった-moz-border-radius
ので、代替手段をチェックし始めました.
もちろん、私の代替ソリューションはブラウザ検出を使用することですが、それはもちろん推奨される方法とはほど遠いものです。
私の最善の解決策は次のとおりです。
これは、Gecko が複合 -moz-border-radius を 4 つのサブプロパティに「拡張」するという理論に基づいています。
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright
より良い解決策を持っているjavascript/CSSの第一人者はいますか?
(このページの機能リクエストはhttp://plugins.jquery.com/node/3619にあります)
html - ローカルドキュメントルートを設定できますか、またはどこにありますか?
ハードドライブからブラウザにファイルを開くとき、ドキュメントルートはどこにありますか?説明のために、次のHTMLコードが与えられた場合、ページがローカルマシンから開かれる場合、ブラウザがそれを見つけるため(file:///)
のファイルはどこにあるべきですか?css
javascript - ページに Google マップが含まれている場合に IE7 で CSS/JS ドロップダウンを修正する最良の方法
<ul>
ナビゲーション用のリストを使用するページがあります(Javascript は、マウスオーバー時にスタイルを表示するかどうかを変更します)。
ページにGoogleマップがある場合、IE6とIE7を除いて、これはうまく機能しています。
この場合、ドロップダウンは機能しません。ただし、このページは FireFox 2 でも引き続き機能します。
少し調査したところ、これが IE Select Box のバグの例である可能性があることがわかりましたが、Google マップでは<div>
ではなく が使用されているように見えるため、確信が持てません<iframe>
。
他の誰かがこれに似た問題に遭遇しましたか?もしそうなら、この問題を克服するための最善の方法に関する推奨事項はありますか?