overflow-y: scroll; が効かないディスプレイがある。それはretinaディスプレイ。 - Qiitaoverflow-y: scroll; が効かないディスプレイがある。それはretinaディスプレイ。 HTMLCSSMac overflow-y: scroll;が効かない・・・ ある日いつものように開発していると、「ここ、スクロールできないんだけど」という指摘を頂いた。 それはよくある「高さを固定して、はみ出したテキストはスクロールさせる」というもの。 heightを指定した要素にoverflow-y: scroll;を指定する、一般的な実装だと思います。
Android4.0とiframe
Android4.0とiframe iframe内でコンテンツを展開するとAndroid4.0でシビレルくらい様々なバグが発生します。 弊社松田の調べによると見つけただけでも以下のような不具合があるようです(Galaxy Nexus調べ)。シビレますね。 a要素に display:block を指定しても、必ずインラインになる position:fixed で配置した要素そのものがタップできない document.body.scrollTop が取得できない -webkit-tap-hightlight-color の指定が効かない ページ内のアンカーリンクが効かない ページの最下部に配置したa要素はタップはできるが、リンク遷移せず、イベントも発火しない z-indexで下に重なる要素が、pointer-events の指定が全く効かなくタップできてしまう js等で要素を位置移動しても、要
スマートフォンとposition:fixedのバグ
スマートフォンとposition:fixedのバグ iPhoneではiOS5からAndroidでは2.2からposition:fixedに対応されてスマートフォンでも固定配置が利用できつつあります。と思いきや色々と落とし穴が多いのでまとめておきます。 Androidではuser-scalable=noが必須 <meta name="viewport" content="user-scalable=no" /> Androidではviewportにuser-scalable=noの指定がないとposition:fixedが動きません。iPhoneではuser-scalable=noの指定がなくてもposition:fixedが動きますがけっこう挙動が微妙なのでuser-scalable=noは指定しておいたほうが良いでしょう。 サンプル（user-scalable=noあり） サンプル（us
スタイルシートをめぐる冒険: dlを含むボックスに背景画像を指定すると背景画像が繰り返される
この現象は、あるWebページで、※1～、※2～、※3～というような「脚注」にdlタグを使用したときに発生した。 本文と脚注を区切る罫線として、脚注を含むボックスの上部に、二重破線の背景画像（line.gif をx軸にリピート）を指定。ddにマイナスのmargin-topを指定して、dtとddが横に並ぶレイアウトにしたところ、一番上にだけ入るべき罫線が<dt></dt><dd></dd>のセットごとに入ってしまったのである。 [該当するブラウザ] Windows／IE7.0（互換モードのとき）、IE6.0以下 症状 実際にどういうことか、右のスクリーンショットを見ていただこう。これは、IE7.0で表示させたときのものである。 そして、スタイルシートとHTMLは以下のように記述されている。（→サンプルページ1） 【スタイルシート】 body { line-height: 1.5em; } .b
Microsoft Support
All Microsoft Global Microsoft 365 Teams Copilot Windows Surface Xbox Deals Small Business Support Software Windows Apps AI Outlook OneDrive Microsoft Teams OneNote Microsoft Edge Skype PCs & Devices Computers Shop Xbox Accessories VR & mixed reality Certified Refurbished Trade-in for cash Entertainment Xbox Game Pass Ultimate PC Game Pass Xbox games PC and Windows games Movies & TV Business Micro
透過PNGの罠 - AUSGANG SOFT
IE7で透過PNGがサポートされて、以前からもありましたが、透過PNGをIE5.5、6でも表示させるJSライブラリがいくつか出ています。 これらのライブラリは、IE独自のAlphaImageLoaderフィルターを利用して擬似的に透過PNG表示をさせています。 でも、このAlphaImageLoaderフィルターには、癖があって、それで以前にハマったことがあります。 実例 IE6(5.5)で見てください。 吹き出しの中のLingerへのリンクをクリックして移動することができますか？ 原因 原因がさっぱりわからなかったので、ライブラリの中身を見て、AlphaImageLoaderで検索したところ以下の情報が。 PNG ちょっと裏技 (2) http://www.minc.ne.jp/~konda/new/png/urawaza02.html アルファイメージローダーを使用した要素(タグ)の内
nitoka blog: IEだとimgタグをlabelで囲んでも動かない
FireFoxだとこんな感じで、imgタグをlabelで囲めばlabelの動きをしてくれるのですが、 <input type="radio" name="q1" value="1" id="q11" > <label for="q11"><img src="images/hoge.gif" alt="値1" /></label> <input type="radio" name="q1" value="2" id="q12" > <label for="q12"><img src="images/huga.gif" alt="値2" /></label> <input type="radio" name="q1" value="3" id="q13" > <label for="q13"><img src="images/fuga.gif" alt="値3" /></label> IEだと
Bug: IE7 absolutely positioned italics
I recently discovered a rather bizarre bug that only seems to affect IE7. If you absolutely position italic text of any kind (text made italic through authors styling or something that is styled via the default browser stylesheet such as ems.) IE7 seems to screw up the rendering and ends up creating a horizontal scrollbar. This problem is best illustrated with an example page (View in IE7 to see t
YappoLogs: IEがWeb2.0に対応していなかった件
IEがWeb2.0に対応していなかった件 既出ネタかどうか分からないけど、iframe name tagsでググっても情報でて無いので書いておきます。 特定のタグやname属性をHTML中に記載するとIEのCtl-Fでのページ内検索やプリント機能が使えなくなります。 詳細は以下の通り。 iframeタグを使用したHTML内で、name属性が使えるタグのname属性にtagsを指定すると、IE6ではページ内検索を実行したときとページプリントを行ったとき(プレビューだけでも化)にエラーダイアログが表示されてしまい、検索や印刷が出来ません。 IE7で直ってるかと思いきや検索だけは出来ません。 エラーコードがIE6とIE7で違うため、バッファオーバーフロー的な何かがIEの中で起きていると思われます。 再現する最小ソースは <iframe></iframe><img name="tags">これだけ
IE7でページが表示されない件について : とあるWEBクリエイターのblog
先日日本語版がリリースされたIE7だが重大なバグの方が修正されていない。 特定のページがごくまれに表示されない。 特定のページの一部分がまれに表示されない。 というものである。 リロードを行うと正しく表示されるし、ソースの表示を行うと正しく表示されていることかブラウザの問題と思われます。 事実IE6では問題なく表示されます。 これをWEBサイト上から回避するにはいくつかの方法があります Content-Style-Typeを正しく記述する。 head要素内にhttp-equiv属性でスタイルにCSSを指定することにより回避されることがあります。 <meta http-equiv="Content-Style-Type" content="text/css" /> これはレンダリングエンジン(ブラウザ)などにスタイルシートを使用していることを明示的に指定するものです。 ブラウザサイドでキャッ
blog.8-p.info: Safari is evil
Internet Explorer の CSS 実装に怒る人は Safari の JavaScript 実装にも怒るべきだ、と思ったんだけど、シェアがあるのにバグがあるから困るわけで、シェアが無くてバグがあるなら無視すればいい気がしてきた。 そのくらいひどいです。 正規表現で "//" のエスケープが使えない fladdict.net blog: 今見ているサイト内で「はてなブックマーク」されてるエントリ一覧を表示するブックマークレット さっそく使ってみようとしたらsafariのおバカが… matchで引っかかっているようです．正規表現中のスラッシュのエスケープ(//)をバックスラッシュ(\/)に変更したら動きました．他のブラウザではふつうに動くのになぁ．一応ご報告です． "?" より前の "\" は "/" になる これで Bookmarklet、なぜかSafariで読めないな… - o
CSSレイアウトの定石 WinIE6バグ回避法
CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう （ブロックレベル要素を内包するボックスにはpaddingを指定しない。） 左右ボーダーとパディングを設
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Dreamweaver
IE7 でフォームに値を入れて印刷プレビューすると…… | 水無月ばけらのえび日記
デフォルトスタイルの差異を無くすCSS