iOSでダブルタップしないとリンク反応しないバグ対応について - QiitaHelp us understand the problem. What are the problem?
border-radius設定時、IE11だと隣接要素との間に薄く線が入る（隙間ができる） - Qiita
これ 概要 タイトルと上の画像がすべて。 borderを設定せずにborder-radiusを設定すると、IE11で表示した場合は隣接要素との間に線が入る。 おそらくIE11のバグで、レンダリング時に要素の辺までアンチエイリアスがかかっているように見える。 なので、薄い線に見えるのは実際は要素間の隙間。 再現
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
iOS の position:fixed バグ回避方法【日記 2014/01/26】
前: ボタンの左右位置次: 雪・科学館・おゆうぎ会 iOS の position:fixed バグ回避方法 2014-01-26 17:32:32 コンピュータ お手伝いしている仕事で、バッドノウハウばかりが溜まっていく気がする… デザイン上の都合で、CSS で position:fixed が使われていた。 テキスト入力を促す箇所で、画面の真ん中に入力窓が出てくる。 まぁ、ネットではよく見るインターフェイスです。 ところが、これは iOS では「使ってはならない」技だった。 バグ報告があり、たまたまバグが出た個所が僕の担当箇所だったので僕が調べることに。 でも、プログラムのバグではなく、iOS のバグだと判明。 position:fixed では、ページをスクロールさせても、ウィンドウに対して常に同じ位置に要素を表示できる。 常に同じ、というとスクロールさせるのをサボるだけで難しくな
【CSS】Google Chrome や Android 系のブラウザで［background-attachment］のエラー。
【CSS】Google Chrome や Android 系のブラウザで［background-attachment］のエラー。 PC版の Google Chorome も含め、スマートフォンの Android 系のブラウザで、背景画像の描画が思いどおりにいかないときがあります。 例えば、背景画像がコンテンツの上に重なってしまっていたり、パララックス系のデザインで背景画像の透明化や不透明化の処理に不具合が見られるとき、あるいは、コンテンツエリアが真っ白になってしまっているときなど。 多くの場合は CSS の［background-attachment］が悪さをしています。 実は、あなたが今ご覧になられているこのサイト（オンズのウェブサイト）の制作時にも、このエラーにハマり、解決に数時間を要してしまいました。 エラーが起こるのは、例えば、以下のような CSS のコードを書いたときです。 bo
PC/スマートフォンで背景画像を固定する - Cube Lilac
Web ページで背景画像を固定する場合、オーソドックスな方法は background-attachment プロパティを fixed に指定する事らしいのですが、この方法だと（PC で閲覧する分には問題ないのですが）手元の iPhone (iOS 5.1.1) では固定されませんでした。 /* この方法だと、iPhone（スマートフォン）で閲覧した時に背景画像が固定されない */ body { background-color : #cccccc; background-image : url('images/background.jpg'); background-repeat : no-repeat; background-attachment : fixed; background-size : 100% auto; /* 画面の幅に合わせて拡大・縮小 */ } そこで少しググってみ
How to apply CSS to a Mac Chrome Select Box?
Doesn't matter what I do, using Mac OSX 10.9.2 and Chrome Version 33.0.1750.152, padding, background-color, nothing works. I am really just wanting to apply a padding-top and padding-bottom of 5px on a select element, works everywhere cept Chrome on a MAC OSX. What gives? How to do this globally on all platforms??
Android標準ブラウザで表示がヘンなら原因は「background-attachment」かも ｜ SEOモード
Android標準ブラウザで背景画像がコンテンツの上に乗っているように見える症状に遭遇したら、「background-attachment」が「fixed」になっていないか調べてみてはいかがでしょうか、という記事です。 もしかして有名なバグかなとも思ったのですが、個人的にはまったのでメモです。 先日、随分前に作られたウェブサイト（スマホ対応など何もしていない普通のPCサイト）をAndroid「4.2.2」と「4.1.2」の標準ブラウザで閲覧したときに、画面が真っ白になってしまうという報告を聞いて、調査しました。 真っ白というより、ちょうど背景画像上のコンテンツが透明になってしまっているような感じで、手探りで（！）操作してみると、リンクなどはタップできるということでした。 そのため、最初、文字コードだったり（該当サイトは「Shift_JIS」のサイトでした）、フォントだったりが問題なのだろう
IE対策：改行される可能性のあるインライン要素に背景画像を指定しない。 | 我流天性 がらくた屋
痛い目にあったので忘れない内にメモ。 改行されるインライン要素に、背景画像で右側に指定しない。 IEでは一行目にしか背景画像が表示されない background-position で right bottom を指定すると表示されなくなる zoom:1 を入れても文字の終わりには正しく表示されない サンプルHTMLはこちら サンプルHTMLに詳しく書いていますが、IE6でのスクリーンショットをいくつか。 （IE7でも再現します） [background-position:right center ]と真ん中右寄せした場合 zoom:1; を指定した場合 妥協解決策：インライン要素(ここでは<a>)の最後に<span>を入れた場合 空spanを使うのであまり気持ちよくない解決方法。 もし良い方法があったら教えてくださいませ。 参考サイト）インライン要素のrepeat-x背景画像が1行目にしか
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」 IEやsafari、Google Chromeではword-breakプロパティが実装されていますが、FirefoxやOperaではword-breakプロパティは実装されていません。 そこで、FirefoxとOperaでword-break:break-allを実現するJavaScriptライブラリ「wordBreak.js」を作成しました。 使い方 ダウンロードした「wordBreak.js」をhead要素などで読み込んでください。 <script type="text/javascript" src="./wordBreak.js"></script> word-break:break-allを利用したいtable要素のclass名に「wordBreak」というclass名を追
インライン要素に背景画像を指定する
Fig 1: インライン要素に背景画像を指定 CSS でインライン要素に背景画像を指定する場合、IE6 と IE7 では致命的なバグがあるので注意。たとえば Fig 1 のように、パラグラフ中のハイパーリンクにアイコンを表示させたいとする。となると CSS はこんな感じになるだろう: a.pdf { padding-left: 20px; background: url(/img/pdf.png) no-repeat 0 50%; } a.external { padding-right: 20px; background: url(/img/external.png) no-repeat 100% 50%; } すべてのモダン・ブラウザで Fig 1 のようなレンダリング結果が得られるが、背景画像を指定したインライン要素が改行して複数行にわたる場合、IE6/7 は Fig 2 のようにし
opacityを適用した時にオンマウスで画像が1px動いてしまったりするバグの解決法 | 素材の壺
今回は透明度を指定するためのプロパティ「opacity」で発生したバグの解決法を書いていきます。まずは「.opacity」というクラスに、opacityの指定を行ないます。 .opacity:hover{ filter:alpha(opacity=80); /*IE*/ -moz-opacity:0.8; /*Firefox*/ opacity:0.8; /*Opera・Safari*/ } そしてこの「.opacity」を画像に適用します。 <img src="画像パス" class="opacity"> これでオンマウスすると画像が透明になるのですが、Firefoxのみ、オンマウス時に画像が1px動いたり、ひどい時は画像が無くなるような時も。これは背景指定が原因のようで、backgroundの指定を追記する事で解決できます。 background: #fff; これでFirefoxの問
jQueryのopacityアニメとIE6,7,8
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / fadeInとかfadeOutとかanimateでopacityどうするとか、opacity対応していないIE6,7,8でも素敵に動くすんばらしーと思い、できますできますはいできますとか言ってると痛い目に合った。 まずIE6、7、8ではopacityを使わない代わりに、IE独自のfilterプロパティをいじって、透明度のアニメーションを実現している。このため、他のフィルタと併用できない。これが特に問題になるのが、そのままではアルファPNGを使えないIE6。IE6でアルファPNGを使おうとするのなら、フィルタのalphaImageLoaderを使わなければならないが、透明度のアニメーションもfi
display: inline-block を使う（修正版） - understandard
週末に @nagomu さんと @terkel さんが YUI grids.css や stacklayout.css で指定している word-spacing と letter-spacing の値はなんでこの値なんだろうね、という話をされていて、おもしろそうだったので、数字の原因を探ったり、いろいろなブラウザーでチェックしてました。 いろいろなブラウザーでチェックをしている時に、以前書いた記事 display:inline-block; を使うで紹介していた CSS ではブラウザーごとに微妙な誤差があったので、修正版を書いてみました。 以前書いていたコード .parent { letter-spacing: -.40em; } .child { letter-spacing: normal; vertical-align: top; display: inline-block; /di
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IE11 border radius and border bug
Webkit-based blurry/distorted text post-animation via translate3d
[Solved] Transforms Cause Font-smoothing Weirdness In Webkit - CSS-Tricks
Firefox placeholder opacity bug · Issue #7589 · twbs/bootstrap
iOSでの背景固定にbackground-attachment:fixedを使うとNG
半角英数字の文字列を折り返す：CSS小技