Google Chrome だけレイアウトがおかしいので調べてみると、どうやら最小フォントサイズという設定で 10px 以上に制限されているようです。わざわざこれを変更して見てくれる人はいないので、サイトデザインの時点でフォントサイズは 10px 以上に制限しておいた方が良さそうですね。
この設定は「設定 → 詳細設定を表示 →（ウェブ コンテンツ）フォントをカスタマイズ」にあります。こういう設定は無いほうがいいと思うけど、それをサイト閲覧者に求めるのも違うと思います。社内ウェブアプリケーションなら設定してもらうのもアリだけど、そもそもその用途じゃ余計 10px なんていらないし、やっぱり変な制限は付けなくていい。Google Chrome のほうがおかしいと思います。
このブログのランキングページを作るのに、1st、2nd、3rd などと序数標識の付いたリストスタイルを（ネットに落ちていなかったので）作成してみました。説明が面倒なので定義を見て欲しいのですが、before 疑似要素と nth-child 疑似クラスをうまく組み合わせて実現しています。今まで、1～3だけ特別なのかと思っていましたが、その後は同様に下１桁が1～3のとき（11～13を除く）以外は「th」になります。
ol.ranking {
counter-reset: number;
list-style: none;
margin: 0;
padding: 0;
}
ol.ranking li {
padding-left: 3em;
text-indent: -3em;
}
ol.ranking > li::before {
counter-increment:number;
display: inline-block;
width: 2.5em;
text-align: right;
margin-right: 0.5em;
}
ol.ranking > li:nth-child(n)::before { content:counter(number)"th"; }
ol.ranking > li:nth-child(1)::before,
ol.ranking > li:nth-child(10n+21)::before { content:counter(number)"st"; }
ol.ranking > li:nth-child(2)::before,
ol.ranking > li:nth-child(10n+22)::before { content:counter(number)"nd"; }
ol.ranking > li:nth-child(3)::before,
ol.ranking > li:nth-child(10n+23)::before { content:counter(number)"rd"; }
まだ、数字の位置が揃っていないのが気になりますが、この辺りが CSS の限界のようです。もし、content を二重にしたり、その中にタグを入れられたりできれば、もう少しマシにできると思います。数字の位置で縦を揃える方法、序数標識を上付き数字にする方法、これらが分かる人はコメントください（タグでゴリゴリ書くのはナシで）。
以下に使用例（Wikipedia より）を示しますが、このブログのオリジナルサイトでしか表示されないと思います。
前来たときは忙しくてブチ切りしたけど、今回は付き合ってあげました。最初何て言ったか（名乗ったかも含めて）覚えて無いけど、「電話番号データベースから自動音声で掛けている」みたいな案内の後、いくつかの質問があって終わりました。
はい、どこの調査なのか分かりませんでしたが、少し安倍政権の支持率向上に貢献致しました。たぶん聞き逃しじゃなく、名乗らなかったと思うんですが、こういう調査ってそういうもんでしょうか？ ちなみに、相手の電話番号も「非通知」でしたので、逆探もできません。
Google Analytics の言語レポートに、下記のリファラスパムらしきアクセスが記録されていたので、調べてみました。通常この部分は「ja」とか言語コードしか来ないのですが、ここに興味を惹くような文を入れて不正サイトへアクセスさせようとするのが目的です。
Secret.?oogle.com You are invited! Enter only with this ticket URL. Copy it. Vote for Trump!
「？」になっている部分は U+0262 の「G」に見える文字コードが入っています。従って、注意していないと一見 Google の URL に見えるサイトに誘導されることになります。
この攻撃のターゲットは、Google Analytics を導入していて、ある程度アクセス数のあるサイトの管理者、ということになり非常に巧妙な手法です。うちみたいな少ないアクセス数のサイトにも来ているのは謎ですが、企業とかのシステム管理者が引っかかったら、システムの深いところまで侵入される糸口になるかも知れません。これなら、何の権限もない一般人を初めから除外できるので都合が良いのでしょう。
PCRE 修飾子で「s」を指定した場合「ドットメタ文字は改行を含むすべての文字にマッチします」、「 これを設定しない場合は、改行にはマッチしません」とあります。例えば「/^(.+)$/m」のように書けば、複数行テキストを配列に取ることができるはずなのですが、実際やってみると改行を含むテキストが返ってきます。対処法で trim を掛けたりしていましたが、せっかくなので調べてみました。
改行の種類として「LF」「CR+LF」「CR」の３種類があると思いますが、実際にテストコードを書いてみたところ、ドットメタ文字は「CR」にマッチし「LF」にマッチしませんでした。マニュアルには単に「改行」と書かれているので、これらのすべてに対応しているものと思い込んでおりましたが、違うようです。従って、上の例で改行に見えていたのは「CR+LF」の「CR」が残っていたものと思われます。
原因が分かれば話は簡単で、文字クラスの否定を使って「CR」及び「LF」を指定すれば良いだけです。
preg_match_all('/[^\r\n]+/m', $text, $match);
マニュアルなどで単に「改行」と言った場合は「LF」のみを指すと思って良さそうです。プログラム書くときも特に意識しないで "\n" を使ってますし、UNIX 系では「LF」なのだから当然と言えば当然でした。毎回悩むのもアレなので、改行テキストを綺麗な配列に取る関数を自作しておくと楽かも知れません。
要注意なのは、HTML の改行コードが「CR+LF」で規定されている点です。このため、textarea で POST されたデータは「CR+LF」になっており、取り扱う際に注意しなければなりません。また、PHP などで HTML を出力する際の改行コードを「LF」のみとしてしまうのは、本来間違いということになります（今まで結構やってたなあ）。多くの場合、「LF」で出力しても、「CR+LF」「LF」が混在していてもブラウザの表示には影響しませんが、気になる方は HTML は「CR+LF」と覚えておくといいかも知れません。
画像の幅を 100% にすると、親要素いっぱいにストレッチされますが、元画像の解像度以上に拡大したくないときがあります。そんなときは、width と max-width を使い分けると良いです。
width: 100%;
max-width: 100%;
画像の原寸サイズはどちらも 600x400 になっています。ウィンドウサイズを変化させてみると分かりますが、max-width の場合は原寸サイズ以上に拡大されることはありません。
改行など余計な文字を取り除いても、ボックス要素の下側に余白が生じる場合があります。これが問題になることはあまり無いのですが、どうしても枠ピッタリに入れたい場合もあります。そんな時は、下記のように line-height を指定すると解消されるかもしれません。
line-height: 1px;
いつの間にか、BIOS ロゴが出たところでフリーズする PC になってしまったことはありませんか？ それ、もしかしたら調子の悪い USB デバイスのせいかもしれませんよ。
ある日、メモリカードリーダーで SD カードが読めない、というトラブルがありました。最初は、SD カードの寿命か、静電破壊（使ってた器機から取り出すときにバチってなったので）が原因だと思っていました。しかし、立て続けに３枚も壊れた（とその時は思っていた）ので、メディアじゃなくリーダーの方に問題があるんじゃないか、と。試に、新しいメモリカードリーダーに交換したところビンゴでした。
話は前後しますが、このトラブルがあるちょっと前から、PC が起動不良するようになってしまっていました。それほど深刻なトラブルでは無い（１回リセットボタンを押せばよい）んで放っておいたのですが、この一件を挟んでいつの間にか症状が出なくなっていたようです。それに気づいてからよくよく思い出してみると、前同じ症状になった PC も、確か内臓 USB の調子が悪かったな、という共通点が…。
とりあえず、USB 器機をできるだけ外し見ると良いと思います。もし、それでも回復しない場合は、内臓 USB コントローラがおかしくなっているかも知れません。BIOS などでオンボードの USB をオフにできるかどうか当たってみると良いでしょう。それも出来ないようなら、マザーボードを交換するしかないですね。もし、同じ症状に悩んでいるようなら、一度疑ってみると良いと思います。
前日に更新してシャットダウンをして、なんで次の日の起動に更新掛けてんだよ、バカだろ。電源コントロールくらいできるんだから、必要なだけ再起動して終わらしとけってーの。にしても、５分とかならまだ分かるよ？ ３時間も掛かるのなら、予め目安時間くらい提示してくれ。仕事で使ってるんだから、これ損害賠償もんだよな。
タイトルどおりだが、何十回入力しても、少し処理待ちした後→パスワード入力画面に戻る、を繰り返すことがあった。数十分くらい放っておいたら、入れるようになって、電源をブチしなくて良かったのだが、いったい何だったのか。アクションセンターに更新しましたという通知があったので、これも Windows Update のせいじゃないか？
従来の Windows アプリケーションだからかと思ったが、Edge でも同じようになるときがある。画面半分ほどしかアプリが表示されず、下側はデスクトップが見える状態で、直すにはデスクトップモードに切り替えてからタブレットモードに戻す必要がある。タブレットオンリーで使えない、中途半端な実装は止めてもらいたい。
設定だのアカウントだの、同じようなものが２つあるのは混乱の元である。デスクトップモードとタブレットモードもそうだけど、明確に分けてユーザーに認識させないと、何をしていいのか直観的に分からなくなる。検索やコルタナを使ってもらおうということかも知れないが、その考えは間違っている。
ここに書いたけど、タブレットモードにしても、デバイス幅が 1024 に固定されるようなので、タブレット向けサイトが表示されない。上下の端っこでバウンドするくせに、引き下げてもリロードにならず、小さいボタンを押すしかない。ちっともモダンブラウザじゃない。他のブラウザは、タブレットモードに対応しておらんし、そもそもタブレットとして使うには無理があるんじゃないか？
Alt キーなど押せないキーがあるから、デスクトップアプリケーションを（キーボード・マウスなしで）完全に操作できない。最初からタブレットモードが中途半端で、デスクトップモードでの操作が必要なくせに、そうなっている意味が分からない。キーボードの切り替えがあるんだから、最初からそこで選べるようにしておけよ。で、そのキーボード出しても、ファンクションキーは Fn キーとコンビネーションで押すことになっている。あと、ソフトキーボードの左上、空いてるんだからキーボード種別ボタン、並べとけ。
Anniversary Update を入れてから、突然ブルースクリーンになって再起動になることが多くなった。しかも、そのときの再起動が遅い、チェックディスクをしてるのかも知れないが、ずっとブラック画面のまま（１０分以上）ハードディスクだけ動いている状態になる。何かやってるなら進行状況くらい表示して欲しいものだ。ようやくログオン画面が出ても、デスクトップ画面までがまた長い。
Microsoft Edge のタブレットモードでは、実際のディスプレイサイズがいくつであっても、device-width が 1024px になるようです。 このため、メディアクエリでレスポンシブ・ウェブ・デザインをしていても、多くの場合は PC サイトが表示されます。 所有している７インチ・タブレット（800×1280）の場合、横幅 1024px を 800px に縮小されて表示されるので、文字等が小さくなってしまいました。 試しに、JavaScript で screen.width を調べると、縦でも横でも 1024px を返します。
訳が分からないのが、デスクトップモードだと実ウィンドウ幅を返すという点です。 このため、デスクトップモードで最大化したときの表示と、タブレットモードとで表示されるデザインが異なるという結果となっています。 ネットで調べてもこれぐらいしか無いので、あまり認識されていない問題かも知れません。 今のところ、縮小されて見にくいときは、表示倍率を操作してスマホ向けのデザインに切り替えて利用するしか無さそうです。
それにしても、Edge でモダンブラウザとなるのかと思ったら、やっぱりマイクロソフトはインターネットの癌ですね。 Windows10 も酷いもんだし、デスクトップは Windows7 で固定してもらって、それ以降はタブレットとデスクトップを分けて OS を開発してもらいたいものです。