absolute positioned anchor tag (with no text) not clickable in IE
I have two anchors positioned absolute on top of an image, the links are clickable in other browsers (Chrome, FF, Safari) but not in IE (tested in 8 & 9 so far) The strange thing is if I give the links a background-color they are clickable, however if the background-color is set to transparent (which is what I want) they are no longer clickable, I've also tried setting zoom:1 but no luck. I guess
CSSで半透明にできるOpacityプロパティとIEでの問題について
ちょっと上手くいって感動したので書きます。今回も番外編で、小ネタです。 ブログのデザインを変更していると、ある要素を透明にしたい時がある。透明にするには、CSSでは次のように設定する。 要素を透明化する CSS プロパティ CSS3 で入ってきたプロパティのようだが、opacity を設定すれば透明化できる。 opacity:0.7; 0 が透明で 1 が不透明、0～1 の値を指定する。 これで Firefox や Chrome では透明化できたのだが、IEでは出来ない。ネットで調べると、IE では Opacity は使えず、filter を使うそうだ。 filter: alpha(opacity=70); /* ie 6 7 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ IEの透明度は0～100の％で指定する。 この他、Firefox や
【CSS】absoluteで指定した空要素がIEだけ消える問題
画像の一部にリンクを貼りたい場合、ありますよね。 今回、画像の上にposition:absolute;で空要素を置いてリンクを貼ったらInternetExplorerだけカーソルを乗せても反応しないという問題が。さすがFUCK IE。 画像の赤い部分にリンクを貼っているのでカーソルを置くと指マークに変わるはずですが、IEだけピクリとも動きません。 空要素を空でなくすことで解決！ これはIEが空要素を本当に空っぽだと認識してしまうことによって起こる現象。つまり何かしら要素を存在させればリンクイベントがちゃんと発生するということです。 そこで空要素に背景色を敷いて、それを透明にすることで見えなくするという手段が有効になります。 .button a { display: block; width: 50px; height: 20px; bottom: 10px; left: 50px; tex
IE 6とIE 7のためのCSSハック16選（2/3）- ＠IT
有限会社タグパンダ 喜安 亮介 2009/11/17 スターハック Star HTML Selector Bug Star HTML Hack IE 6とMac OS XのIE 5に適用します。使用方法は、適用させたいセレクタの前に「* html」と記述するだけです。スター（*）を適用するので、「スターハック」と名付けられました。 適用したいセレクタの前に「* html」を記述することで実装できます。そのほかのモダンブラウザは「HTMLには親要素がない」と解釈し、「この記述は間違っている」として適用しません。 しかし、IE 6やMac OS XのIE 5は、それを正しいと認識し、適用してしまいます。このハックは、IE 6のズレを直す際によく使われるハックです。 ■ 構文 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "ht
CSSハックを使わずIEのバグに対処する方法 [ホームページ作成] All About
CSSハックを使わずIEのバグに対処する方法特定のブラウザに限定してスタイルを適用する方法として、ブラウザのバグを利用した「CSS Hack(ハック)」がよく使われています。IEでのみ表示がおかしくなる場合の対策なども紹介。 Internet Explorerでのみ表示がおかしい場合の対策 スタイルシートを使ってデザインしていると、他のモダンブラウザではうまく表示されるのに、 IEでのみ崩れて表示されてしまうことがあります。 IE7ではうまく表示されるのに、IE6以下ではおかしくなってしまう…という場合もあるでしょう。 そういったときには、IEにのみ別のスタイルを適用させる、「CSS Hack（ハック）」がよく使われます。 当ガイドサイトの記事でも「スタイルシートでドロップキャップを作る」の5ページ目で、Mac版IEのみを除外するCSS Hackを使っています。 CSS Hackは、様々な
![CSSハックを使わずIEのバグに対処する方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
IEでのCSSのバグを回避するhasLayout | コリス
IE7で拡大・縮小時にレイアウトが重なってしまったり、IEでフロートした要素がはみ出てしまったりとIE独自のCSSのバグがいくつかあります。 これは、IEのhasLayoutが原因のひとつとなっているので、それを回避する方法を考察します。 hasLayoutとは IEでのCSSのバグを回避するhasLayoutの値 CSSのバグに効果のあるhasLayoutの指定方法 hasLayoutの参考ページ hasLayoutとは hasLayoutとは、オブジェクトがレイアウトを持っているかどうかを示すものです。 hasLayoutの値はread-onlyのため読み込みのみ可能で、falseとtrueがあります。 hasLayoutの値（read-only） false デフォルト値。 オブジェクトがレイアウトを持っていない。 true オブジェクトがレイアウトを持っている。 IEでのCSSのバ
[CSS]IE9対応、IEの各バージョンごとに異なるスタイルシートを適用する方法のまとめ
IEの各バージョンごとに異なるスタイルシートを適用する方法はいくつかあります。それらの利点・欠点を検討し、さらにIE9へどのように対応したらよいのかを紹介します。 In defense of CSS hacks — introducing "safe CSS hacks" [ad#ad-2] 下記は各ポイントを意訳したものです。 Conditional stylesheets -条件付きコメント：スタイルシート Conditional classnames -条件付きコメント：class名 CSS hack -安全なCSS hackとは 条件付きコメント：class名とCSS hackのコンビネーション [ad#ad-2] Conditional stylesheets -条件付きコメント：スタイルシート 条件付コメントはInternet Explorerの特定のバージョンでロードさせるべ
jQueryでUL,LIをslideしたいだけなのにIEにはほとほと困りました | akkun_choi pedia
UL,LIで作られたメニューバーのようなものを開閉する仕組みをjQueryでやることになりました。ただ、普通に全体を隠せばいいっていうものではなくて、（１）特定の項目以外を隠す動作を入れたいのと、（２）ネストしても動作するという仕様です。しかし、IEに思った以上にハメられ、色々試行錯誤した結果、３つの偉大なる知見を得て解決できたのでここに記します！ 普通に全体を消すだけなら $('ul#target').slideUp(500) でできます。 （１）特定の項目以外を隠す動作を入れたい というのは、例えば選択されている項目にcurrentクラスがつけられていて、その項目以外を隠す場合は $('ul#target li').not('.current').slideUp(500); と、jQueryなら簡単に書けました。すごいね。.not()を知った時はjQueryに惚れ直したｗ （２）ネスト
IE6でよく遭遇するCSSのバグとその解決方法 | コリス
Dave Woodsのエントリー「IE6 -CSSのバグとその解決方法」から、IE6でよく遭遇する３つのCSSのバグとその解決方法の意訳です。 IE6 - CSS Bugs and Fixes Explained IE6で、マージンが２倍になってしまうバグ IE6で、hasLayoutプロパティによって起こるバグ IE6で、小さい高さを指定した場合に起こるバグ IE6で、マージンが２倍になってしまうバグ IE6で、フロートした要素のマージンが２倍になってしまうバグと解決方法の紹介です。 下記のコードで、IE6はマージンが20pxになります。 sample:バグ #navigation{ float: left; width: 200px; margin-left: 10px; } #content{ float: right; width: 500px; margin-right: 10p
リンク画像の枠線を消す
バナー等の画像にリンクを設定すると青い枠が表示されます。これをCSSを使って消去する方法を何通りかご紹介します。 消去前 消去後 １．スタイルシート（styles-site.css）に設定 まず、タイプセレクタで img 要素に枠線を与えない設定を行います。 img { border-style:none; } または、子孫セレクタで a 要素の子孫要素である img 要素に設定を与える方法です。上記の場合は全ての画像にスタイルが適用されますが、この方法であればリンク画像のみにスタイルの設定を与えることができます。 a img { border-style:none; } さらに、img 要素に class 属性 または id 属性を与えて、クラスセレクタ・一意セレクタで指定すれば画像によってリンクのあり・なしを振り分けることができます。以下はクラスセレクタの例です。 .no_border
ブラウザに関するお小言・・・IE5.5～IE7のバグ＆対策メモ
私自身は、Operaをメインブラウザとして使っているんですが、世の中には、まだまだIE（Windows Internet Explorer）ユーザーが多いようです。そしてそれがバージョンアップされてない場合、古いIEは、思いもよらないバグでサイトの表示を崩れさせていたりします。（以前、旅先のホテルのパソコンで自分のサイトをチェックしてビックリした経験あり。） ということで、サイト作りする中で私が直面したIE5.5～IE7のバグとその対策をメモ。（実は、IE対策を知らないまま、ごりごりカスタマイズしたこのブログも、IE5.5とIE6で崩れています。早く対応させなきゃ。） 古いバージョンのIEでどう表示されてるかチェックするには、 ＞＞ IE Tester が便利です。IE5.5～現在のバージョンまでのIEの表示確認ができます。 ● 古めのIEでは効かない属性など。 - 属性： min-wid
float と margin が一緒にあるときは、display:inline; を – かめめねっと
これは超ポピュラーなバグの一つですが、divでfloat指定したときmarginを使うとその値が倍になります。 コレの解決方法は、displayの標準値（block）を「inline」にすることで解決されます。 .要素{ float: left; margin: 10px 5px 10px 0x; display: inline; } 意外に忘れちゃうんですよね。あとでIE6で確認してびっくり(゜д゜)； てことになるんですよ。 毎日コーディングばっかりやってればそんなことないのでしょうけど、、、ね。 なので私はエディタに「float と margin」が一緒に存在していた場合は、色を変えて直ぐに気づくように工夫してコーディングしています。 時々このやろ。って思ったりもしますが、ちゃんとCSSハックを使わないようにしてバグ修正していると、コードを短くすることが出来たり、たまーに勉強になるの
ネガティブマージンを使うなら position: relative; を併記 – かめめねっと
レイアウト上、margin:-20px; などと表記したいときもあるんだけど、IE6は言うことを聞いてくれない。。。 ネガティブマージンとは「マイナス値のマージン」のことですが、IE6ではこのマイナス値を読み取ってくれないためにこのようなことが起こる。 そのため、margin:-20px; とするなら、 .要素{ margin-left:-20px; position:relative; } とするか、marginはdiv上でfloatプロパティを使うと値が2倍になってしまうバグもIE6にはあるので、 .要素{ position:relative; left:-20px; } とするのが良いかも知れない。 ただ、親要素の位置などによっては、計算が異なる場合があるので、必ずしも同じ位置になるとは限らないと思うので、その場に応じて使いやすい方を使おう。 私は position 好きなので、後者
SCRUFA4 เว็บแทงบอล ยอดนิยมอันดับหนึ่ง เว็บตรง UFABET ✅✅
UFABET เว็บพนันออนไลน์ อันดับ 1 บริการแบบครบวงจรตลอด 24 ชั่วโมง UFABET เป็น เว็บไซต์พนันออนไลน์ อันดับ 1 ของประเทศไทยและเอเชียที่ได้รับการยกย่องเรื่องการบริการและความมั่นคงทางการเงินอย่างสูง UFABET ฝากถอน ไม่มีขั้นต่ำ เนื่องจากเราใส่ใจคุณภาพในด้านการบริการและประสิทธิภาพของเว็บไซต์อย่างมาก ทำให้มีสมาชิกจำนวนมากให้ความเชื่อถือกับเราและเพิ่มขึ้นอย่างต่อเนื่อง เราเป็น เว็บพนันออนไลน์ ที่บริการรับเดิมพ
【CSS】CSSレイアウト時のIE6対策まとめ | バシャログ。
Adobe の CS5 はなんか凄そうですね。「でもお高いんでしょ？」「ハイ、とても！」 いま会社で使っているアプリは「Macromedia」の Dreamweaver8 と Fireworks8 です。結構バリバリ制作作業していますが、別に不便に感じてないしなー、と思っている sakai です。自宅では Dreamweaver4 と Fireworks4 です。エヘン。 世間では HTML5 や CSS3 の話題も増えてきた今日この頃ですが、実務では相変わらず IE6 との格闘が続いています。 ただ、長年さんざん IE6 対策に取り組んできたこともあり、今ではそれほど IE6 を意識してコーディングすることもなくなりました。 今回は IE6 をターゲットに含めた CSS レイアウトで気をつけたい点をまとめました。 基本ですが、おさらいまで。 大前提 大前提として、IE6 は標準準拠モード
IE6/IE7/IE8/IE9のCSSハック
IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハックです。IE9はまだベータ版なので有効にならなくなるかもしれませんがとりあえず。 →IE9も正式版で確認済みです。 １．IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハック 以下の順番でプロパティおよびセレクタを記述してください。 body { color: red; /* all browsers, of course */ color: green¥9; /* IE8 and below */ *color: yellow; /* IE7 and below */ _color: orange; /* IE6 */ } body:not(:target) { color: black¥9; /* IE9 */ } IE6：プロパティの先頭にアンダースコア「_」を付与 IE7：プロパティの先頭にアスタリスク
CSS/HTMLのテクニックをクロスブラウザ対応（特にIE）にする方法のまとめ
17 CSS/HTML Effects with Cross-Browsing Alternatives サポートしないブラウザへの対応方法はJavaScriptを利用するなどいろいろありますが、その中の一つとして紹介します。 [ad#ad-2] 下記は各ポイントを意訳したものです。 幅の最小値・最大値 (IE included) RGBa (IE included) 不透明度 (IE included) 画像の回転・拡大縮小 (IE included) 背景をブラウザいっぱいに表示 (IE included) 画像無しのビュレット テキストのシャドウ (IE included) 複数のボーダー (IE included) ボックスシャドウ (IE included) 角丸 スクリーンリーダー用のコンテンツ ネガティブ値で指定したtext-indent Clearfix (IE inclu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リゾレーヌ サプリを口コミだけで判断してはダメ？バストアップ効果が口コミ通りなのか試してわかったことを包み隠さず公開します！
サービス終了のお知らせ
ADP: floatレイアウトでつまづかないためのTips