チェックボックスは「見た目上」readonlyにならない フォーム部品にはそれぞれreadonly属性がサポートされていて、これを指定すれば入力が不可能になります（disabledとは違います、念のため）。 ところがチェックすボックスやラジオボタンにreadonly属性を…

Helveticaが原因 IEでfacebookの「いいね」ボタンを実装すると、文字化けしてしまいました。 どうやら、デフォルトでHelveticaがフォント指定されているらしく、そのため文字化けを起こしてしまったようです。 IEとHelveticaとの相性の悪さは有名で、今回の…

Flash特有の属性値を指定 スクロールに追従する固定ヘッダーを実装していたところ、IEでのみYouTubeを埋め込んだiframeがヘッダーより前面に表示されてしまうという現象が起きました。 本来は左図のようにヘッダーが最前面に表示されるべきところ、右図ではY…

iframeを使っていませんか レガシーなIEと同じくらい不具合の多い旧式Androidデフォルトブラウザですが、まれにファーストビューのまま画面がフリーズしてしまうことがあります。 そのようなときはまず、iframeを使用していないか疑ってください。 iframeを…

format-detectionを利用 iOS版Safariでは、電話番号だけでなく、IPアドレスや郵便番号にまでリンクが自動で貼られてしまうという性質があります。 しかも郵便番号に貼られたリンクをタップしても、特に何か起きるわけではないので、ユーザーの方を混乱させて…

以下は、IE6/7での表示です。 セルが消失しています。 tdがないわけではなく、何も値の入っていない空セルなのです。 IE6/7では空セルは表示すらされないという特徴があります。 何かしら文字列を入れればよいので、半角スペースを入れます。 実態参照で書き…

input要素ではなくbutton要素を使用 フォーム部品であるsubmitボタンに対して、通常は画像で実装するような細かい装飾を行いたいとき、input要素では限界があります。 なぜならinput要素は子要素をとることができないためです。 たとえばこんなsubmitボタン…

<meta name="viewport" content="width=device-width">が無視される 最新版のIE（特にWindowsPhoneやSurfaceなどのモバイル端末）において、viewportの指定が無視されることがあります。 すなわち、viewportのサイズが端末の画面サイズではなく、端末の解像度そのままになってしまい、モバイルなのに大画面用のス</meta>…

公式のリンクでは、iOSとandroidとで挙動に差が出てしまうのですが、下記リンクならLINEアプリケーションを直接起動させることができます。 <a href="line://msg/text/送りたいテキスト" target="_blank">LINEで送る</a> 送りたいテキストの部分は、エンコードしなくても大丈夫なようです。

transparentとallowtransparencyを指定 (1) まず、iframeで読み込まれる側のページの背景を透過にする body{ background-color:transparent; } しかしこのままだとIE(8以下)では透過されません。 (2)iframeにallowtransparency属性を指定 <iframe src="○○○.html" allowtransparency="true"> ～ </iframe>