Google Chromeでtext-decorationのnoneが効かない件。｜Webディレクションやってます blog
先日このブログの新しいデザインのものを静的なHTMLで作っていました。 まぁ、結果としては、2日ぐらい寝かせると全く気に入らなくなったので、お蔵いりしました(笑) で、問題はそのHTMLを作っている時です。 このブログの右側にもあるいくつかのテキストリンクエリアに、マウスhover時に、下線を消すようにしたくて、 を指定したんです。 まぁ、なんという事もない誰でも知ってる書き方です。 なぜかGoogle Chromeで下線が消えない?! そして、いざGoogle Chromeでみてみると・・・マウスを乗せても下線が消えません。 HTMLを書いていてレンダリングチェックに最初Chromeを使っていたので、「あれ?何か継承間違いしてる?」と思って色々変えてみたけど、やっぱり変わらない。 ということで問題切り分けを・・・と思い、他のブラウザで見てみたら、ちゃんと動いている。 ますます意味が分から
【Apache】Rewriteのクエリ文字列のエンコード、デコード at softelメモ
問題 Rewriteでパラメータをつけると、%エンコードされていたものがデコードされたりする？ 答え エンコードさせたり、させなかったりできる。 .htaccess で以下のようになっているとき RewriteEngine On RewriteRule ^index.php\x3F(.*)$ ./?$1 [L] 以下のようなURLにアクセスすると、 /index.php%3Fcode%3DXXXXXXXXXXXXX%252B3XkFG%252BGcNb%252B%252BlgqN7I9Pv2LjMTQm8%253D $_GET はこうなりました。 ["code"]=> string(44) "XXXXXXXXXXXXX+3XkFG+GcNb++lgqN7I9Pv2LjMTQm8=" アドレスバーに入力 /index.php%3Fcode%3DXXXXXXXXXXXXX%252B3XkFG%
Firefox Button Height Fix
One problem I've seen on occasion is that button heights in Firefox are a few pixels larger than in other browsers. This can be a nightmare when trying to unify the size of buttons with an A elements, as we found out when implementing a new feature on MDN: The middle element is an INPUT and the others are your basic A element. You can see that the INPUT element is just slightly bigger -- enough
IE8 で擬似要素のスタイルの動的な更新ができない
JavaScript で要素のクラス属性を操作してスタイルを変更するような場合、IE8 には :before/:after 擬似要素のスタイルが再描画されないというバグがある。 <p> <a href="#" class="selected">One</a> <a href="#">Two</a> <a href="#">Three</a> <a href="#">Four</a> </p> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $('p').each(function () { var $links = $(this).find('a'), i = $links.filter('.selected').eq(0).index(), len =
[実機未検証]Androidでp要素の幅が狭まる時の対応策
悩み Androidのエミュレータで確認した際に妙な状況に遭遇。原因と対策の調査でえらく時間を喰いました…。 根本的な解決策は不明ですが、ぜんぜんValidじゃない回避策が見つかりましたので記事にします。なお、実機未検証ですので、そもそも実機でこの問題が起きているかどうかからあやふやです。 この点、ご留意くださいませ。 [2015.2.1追記]— viewportが原因かもしれない件を記事末尾に追記 — [2014.4.3追記]— とある方から解決方法の１つを教えていただけましたので追記します。 詳細は下にある「透過gifを使う」の項目をご覧下さい。 — [2013.10.30追記]— この件は何度かTwitterにて「これはダメな方法では」と指摘されていまして、私自身も上記冒頭に上げているようにダメな方法だと思っています。しかしながら、とある方にご協力いただいて解決法を探っていただいたこ
![[実機未検証]Androidでp要素の幅が狭まる時の対応策](https://cdn-ak-scissors.b.st-hatena.com/image/square/f6dd84297ff932a2155d9205a82b720872f49ec7/height=288;version=1;width=512/https%3A%2F%2Fwebutubutu.com%2Fwp-content%2Fuploads%2F2013%2F02%2F130211_01.png)
Mobile Safariで最後の１文字が改行されてしまうバグ - くらげだらけ
スマートフォンブラウザ関係のバグは（Android browserを中心に）たくさんありますが、今回はかなりレアケースなバグの話と回避方法についてです。 タイトルどおり、iPhone/iPadのmobile safariやWebViewで日本語文字列の最後の１文字が不自然に改行されて表示されてしまうバグなのです。 どういうことかというと↓下のように表示されるということです。 くだくら げサンプルページも作りましたので、以下のページをiPhone, iPadで表示してみてください。 Sample: http://kudakurage.com/test/mobile_safari_line_break/ 発生条件 発生条件は少し複雑なため、そんなに遭遇することはありません。 （ただその分googleで検索しても、遭遇した例など出てきません） mobile safariで閲覧している PCブラウ
widthを決めずにfloatさせたい
こんにちは、溝上です。 今回はちょっと便利なfloatの使い方をご紹介したいと思います。 以前紹介したfloatを使う際の注意点に反してしまいますが 幅が決められない（決めたくない）要素をfloatさせたいときってありますよね。 例えばフッターにテキストリンクを多数並べたい場合などが考えられます。 | 会社概要 ｜ お問い合わせ ｜ 個人情報保護方針 ｜ 採用情報 ｜ サイトマップ | ↑こんなリンクです。 「それなら以前紹介したこの方法でいいんじゃない？」 と先輩に突っ込まれましたので、今回は違う方法で実現してみたいと思います。 まずは前回の先輩のサンプルを応用（拝借）してみます。 （htmlコーディング） <div class="list"> <ul> <li>テストです</li><li>テストですよ</li><li>テストですね</li><li>テストなんだな</li><li>テスト
[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)
[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版) Androidの所為で工数が増えてウザイとか、AndroidのWebkitはWebkitじゃねぇとか スマホのCSS3関係はどうしてもAndroidをdisる感じの内容になりますね！ 特に明記がないものはすべてWebkitについてです。 見つけ次第順次追加予定。 タイトル変更、増えてきたので目次追加しました。 この記事はiOS5、Android 3以前について記載したものです 【css】 タップ時にz-indexを無視して下の要素に枠がつく(Android) 【html, css】 マルチバイト文字にfont-weight:boldが効かない(Android) 【css】 border-radiusのコーナーがジャギる(Android) 【css】 box-shadow、text-
![[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:
IE6と7あたりでz-indexが効かなくて困った場合の解決方法 - tukihatuの技術日記
早く死なないかなIE6。寿命後どれくらいかな。 いろいろ解決方法は提示されてるけど、どれもこれもわかりにくいというか説明が長い！ のでメモ。 結論 ◎IE6、IE7の仕様では、positionにrelative、absoluteなどを使うと重なり順が自動で設定される。（たぶん初期値0） ○親要素にz-indexを設定している場合、その中の要素でz-indexを指定しても親要素内でしか効果が無い！（これはどのブラウザでも同じ） （↑第一階層z-index:0 > 第二階層z-index:2000 よりも 第一階層z-index:1 > 第二階層z-index:0 の方が重なり順は上になる） ○z-index要素なしよりz-index:0のほうが強い。どちらも同じz-index:0の場合はソース順で下に書かれたものが強い。（これも他ブラウザと同じ） ×IE6、IE7では親要素positionに
IE9ヤバイ。IE9の文字間隔･互換モード･DOCTYPE宣言について
IE9文字間隔確認用サンプル 文字間隔や段落の間隔をチェックする為のサンプルです。とりあえずFirefox3.6とFirefox4でズレない事を確認。文字間隔のチェック用なので意味不明な文字が並んでいます。 ※追記･注意：下記ページはスタイルシートで少しだけ調整しています。 全くの未調整の場合、段落の高さが大きく異なったり、半角英数字のフォントが 文字コードで変わったり、かなり比較し難いものになったため。 後述しますが、英数字フォントにsans-serifを指定すると問題が発生するようです。 ※サーバー引っ越し後、以下リンクは文字化けするようになりました (修正予定なし) HTML 4.01 サンプル HTML 4.01+UTF8 HTML 4.01+EUC-JP HTML 4.01+SHIFT-JIS XHTML 1.0 サンプル XHTML 1.0+UTF8 XHTML 1.0+
Firefox3.6でおかしかったdisplay:boxの一部の挙動がFirefox4.0で直ってた。 | soplog(そぷログ)
2011.03.25 Web CSSFirefoxブラウザ Firefox3.6でおかしかったdisplay:boxの一部の挙動がFirefox4.0で直ってた。 Firefox3.6ではdisplay:box;に癖があり、やや使いづらい印象でしたが、Firefox4.0ではどうなったのか、気になったので調べてみました。 display:box;を指定した要素の子要素は、width,heightの値にpaddingを含めてしまう。 display:box;を指定した要素にmargin:0 auto;を使用した中央揃えが効かない。 引用元：display:box;の挙動がブラウザによって違うみたい | blog.wonder-boys.net 前者に関しては調べきれていません。 後者に関しては、相変わらず効きませんでした。 個人的に一番気になっていた「box-shadowが内包要素の所で途切
はねつき IE６で勝手にコンテンツ内容が複製されるバグ
よく、バグが多いバグが多いと嘆かれ続ける、業界ナンバーワンシェアの我らがふぁっきんIE様。 で、今日もまた恒例のバグに直面したわけです。それがタイトルにあるとおり、コンテンツ内容が複製されるバグというやつ。どうにか無事解決も出来たので、今回もメモがてらに書いてみます。内容は長くなるので以下に。 コンテンツ内容が複製される、別の言い方をすると、最後の内容物のゴーストが作成されるとでも言うのでしょうか。もしくは分身とか残像とかそんな感じ。 言葉だけだとわかり辛いので、画像を用意してみました。 Opera9で見た場合 IE6で見た場合 こんな感じでIEの方では最後の内容物の文字が複製されて下にはみ出してます。ちなみに、これが文字じゃなくて背景画像だった場合、背景画像が複製されることもあるそうで。 でサンプルソースはこんな感じ。 <body> <div id="container"> <di
IE7のズーム機能でバグる - hasLayoutとは | Takazudo Clipping*
IE7のズーム機能を使うと、ラジオボタンやチェックボックス、文中に入れた画像がおかしくなります。こんな風に。 <input type="radio" />ウェブ全体から検索 <input type="checkbox" />日本語のページを検索 <img src="/clip/cmn/img/entry-bg-01.gif" />オマケ IE7のズームで崩れるサンプル これを直す方法。 IE6までは、問題のある要素にheight:0を指定するという、holly hackと呼ばれるバグ対処方法で、数々の問題のあるバグが解決されてきました。IE7になっても、コレに変わり、min-height:0を指定すれば直るじゃん！と思ってました。 しかし、その方法でもこれは直らない・・・。他のズーム機能のあるブラウザではこんなこと起こらないのに、どうすればいいか到底見当もつかない・・・ひどすぎるIE7・・
IEバグ：marginの値が指定値より大きくなる
大抵のCSSバグは、回避法が有るので何とかなるのですが、回避法が特に存在していないバグの場合非常に困ります。 最近の仕事で、IEバグでは比較的発生しやすいIEバグが起こったのでメモとして記しておきます。 floatで左右どちらかに寄せているボックスに、marginの値を指定するとIE5.x/IE6の環境下で、指定値の2倍程度のmarginが設定される。 大抵の場合はpaddingで代用出来るのですが、今回のケースではdivなどのボックスに対して指定せず、h3などのblock要素に直接floatを指定し、marginで調整しようとした際に発生。 該当のh3には背景画像が指定されており、テキストの位置をpaddingで調整していたので、marginを指定するしか無く、バグが発生しました。 対応方法でいくつか候補はあったのですが、今回はアンダースコアハックで対応。 divを追加して対応という方法
ultra blue:Firefox ・バグの再現・ textarea 内でカーソルの点滅が消える問題
Firefox 2.0.0.7 デモページ Windows XP sp2 、 Fedora 7 で確認。 input 要素でも同じ条件下で発生。マークアップとスタイルシートのみ。JavaScript は無関係。背景の有無でカーソルが出たり消えたりするようにした。 涙目 これを知らないで設計して最後の最後で気づくと大変なことになるから、みんなも気をつけようね！ position:fixed; な背景要素を先に作って、（子供ではなく）その兄弟に absolute を当ててから、背景に被るようにテキストエリアを作った場合に起きる、たとえ z-index で上下を指定しても。言葉で説明するより、これはソース見て試したほうが速いと思う。GUI を作るなら十分ありえる状況だよ、うん。 既存のノードを孤児にしてもう一度つり下げてみたり、別な親からクローンを作ってみたり、 value 属性をいじってみたり
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のバ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IE8で特定の文字だけが小さく表示される
スマートフォンブラウザ不具合特集
IE7のズーム機能でバグる - hasLayoutとは | Takazudo Clipping*