症状 以下の条件群のいずれかに該当するとき、アンカーにマウスポインタ等を乗せて:hover状態にすると内側から3番目のボックスの高さが増加したり減少したりする。 条件群1 3重以上の入れ子ブロックになっている。 一番内側のブロックに含まれたa要素に:hover疑似クラスで背景を設定している。 最も内側のブロックに任意の上下マージンを設定している。 内側から2番目のブロックに背景とボーダーを設定している。 内側から3番目のブロックに任意の幅を設定している。 条件群2 3重以上の入れ子ブロックになっており、最も内側のブロックが複数存在する。 一番内側のブロックに含まれたa要素に:hover疑似クラスで背景を設定している。 内側から2番目のブロックに任意の上下マージンを設定している。 内側から2番目のブロックまたはそれより内側にある要素に背景を設定している。 内側から3番目のブロックに任意の幅を
従来のロールオーバーは 1)cssのa⇔a:hoverで背景を切り替える 2)JavaScriptでonmouseout⇔onmouseoverで背景もしくはimg srcを切り替える の二つの方法で実装可能だが、これをそのままスマートフォン向けに実装すると、下記のような不具合が起きる。 ・ボタンの色が変わったまま戻らない ・ブラウザのバックボタンで戻った際に色がノーマル時に戻っていない (ホバー時のままになっている) これは現状、cssではどうにもならない。Javascriptでonclick系のイベントハンドラの代わりにontouch系を用い、下記のように対応するほかない。 最後のwindow.addEventListenerはブラウザのBackボタンで戻ったときにrolloverで変化した画像もしくは背景色が残っていた場合クリアするための記述。 function smartPhone
10press webで、暮らしに広がりを。HTML / CSS解説・webテンプレート・web素材。 サイト作成 HTML・CSS ダウンロード その他 ブログ リンク サイト内検索 トップ > HTML・CSS基礎 > Tips > CSS のバグやトラブルについて CSSバグとは何か CSSバグは、ブラウザによるCSSの独自の解釈により、作成者の思ったとおりではない、あるいは他のブラウザと異なる表示のされ方をしてしまう現象を指します。 CSSバグの回避法・初歩の初歩 CSS作成中の表示確認はSafari・Opera・Firefoxなどで行う残念ながら、ユーザーが多いInternet Explorerにはたくさんのバグが存在します。より多くのブラウザでできるだけ思い通りのデザインを実現したい場合は、上記のようなCSSを極力正し く解釈するブラウザに合わせてCSSを書き、その後IE向けに
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
IE リスト ボックスモデルバグの対処法 XHTMLで XML 宣言もきちんと書き、 しかも IE6 の Quirks モードや WinIE5 と、その他のブラウザの Standards モードとで同じように表示される ボックスモデル解釈の違いにかかわらないCSSの書き方をします。 width とともに padding と border は指定しない * width を指定した要素には左右の padding と border は指定しない ( 0にする )。 同様に、 height を指定した要素には上下の padding と border は指定しない( 0にする )。 * padding または border を指定した要素には width や height を指定しない ( 0にする )。 ・width を指定したボックスには border も padding も指定しない。 この方
IE8,Firefox,Chrome,Safariでは、問題が出ないul,liのマージン問題。 IE6,IE7だと、ul,li要素の先頭にスペースが入ってしまう。これを解決するには、下記のように一文追加する。 list-style-position:outside; ブラウザごとに違う解釈(表現)のせいで、世界中でどれだけどwebデザイナーが苦労してるんだろう(^^; マイカテゴリー 購入レビュー(151) PC関連(33) 本の電子化(自炊)(12) ScanSnap(14) Acrobat/PDF(10) DC-210N裁断機(10) iPad(18) EOS 60D/Kiss X5(17) DMC-LX3(7) 写真(32) 写真(家電分解レビュー)(11) 写真(川崎風景)(22) PCゲーム・ソフト(4) web関連本レビュー(2) webデザイン参考サイト(13) XHTML+
iframeでスクロールバーを常に表示させない為には、 属性としてscrolling=“no"を指定します。 とある作業にて上記の記述をしたのですが、その際、 FirefoxとIEでは期待通りの動作をしてくれました。 しかし、Safari、Opera、Chromeでは スクロールバーが表示されてしまいました。 理由は、iframe内のhtmlが使用するcssに 下記の記述があった為でした。 html { overflow-y: scroll; } この記述を消したら期待通りの動作をしてくれました。 尚、全てWindowsでの話です。 解決まで、少し遠回りしてしまった… Tweet Tags: htmlcss 2009/09/30 16:40 Permalink Comments 3 notes
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く