今回は完全にブログ（日記）レベル、備忘で書かせてもらっています。
先日、撮影スタジオのホームページのメンテナンス（改定）をしていてディバイスによっては表示がおかしいことに気が付いた。
その後、スタイルシートと格闘すること3日、全然回答にたどり着かなかなく、て大変苦労しました。
ある日、表示異常に気付いたが、その時点では、世の中にユーザーエージェントスタイルシートというものがあることも知らなかったし、それが悪さをすると思っていなかった。
表面的には、IPADでの表示が他のディバイスと違う表示になるという事象を見つけた。
もう少し詳細を説明するとIPADだけ、ボタンの横のR（丸み）が表示されてしまうという現象が起きる。
それに、加えてボタンの色が（微妙に、タイミングによって）グレーアウトされる。
これを修正しようとしてCSSをあれこれいじってみた、最初にimportant指定しても直らなかった。
こういった類の事は分かってみればなるほどという事ばかり、「なんだこんなに簡単なことだったのね」とおもうのだが、そこまでの苦労は結構な作業量になってしまう。
ボタンの表示がおかしいと気づいたのは1週間前。
スタイルシートだなと思って少しいじってみたがうまく表示されない。
原因を探ってみると・・・
最初はwordpressに依存するのだと思いついた。
そこで、検証作業開始。
「以前はスタイルが崩れなかったSUBMITボタン。」
そう思って検証をはじめたが、
以前は崩れていなかったと、思い込んでいたこと、これ自体が勘違いだと気づくまでに時間がかかった。
ステージングサーバーに以前利用していたバックアップテンプレートをリストアし、動かしてみたら、問題なく表示されている。
やっぱり以前はきちんと表示されていたんだ！つまり以前のテンプレートではこの現象が起きなかったんだ！
と思ってしまった。
ところが、後々わかることなのだが、確認したボタンはSUBMITではなくリンクボタンだった、当然、別スタイルが適応されているわけ。
これが第一の勘違い。
そこから深みにはまっていく。
それで、1日がかりで、あれこれいじっている最中に、aタグを見つけて、以前のテンプレートでも同じ事象が起こることが分かった。
ここでやっとテンプレートやwordpressに依存する障害ではない、白だと気が付いた。
次に疑ったのが、プラグイン。
これだ！見つけた！
と思って勘違いしたのは、プラグインのスタイルシートにも非常に似たようなR指定、グレーアウト指定のスタイル記述があったこと、カラー指定だけならまだ勘違いしなかったかもしれないがボタンに完全同一のアール指定があったので、絶対ここに違いないと思い込んでしまった。
最終的には、プラグインに適応されているだろうと思われるすべてのスタイルシートを削除してテストしてみたが、同等の現象が起きることでプラグインの疑いが晴れた。
ここでさらに1日。
さらにその次に疑ったのが、CSSの記述法、文法。
＃ なのか ． なのか、-が適応されているのか、importantの綴りが違うのかなど、あれこれ調べながら考えること1日
そして最後にたどり着いたのがユーザーエージェントCSS
Web開発されている方にはなじみがあると思いますがchromeやfirefoxのディベロッパーツール、f12で確認すると、スタイルシートファイルが表示されるよね。
それまでの、何度もHTMLやCSSを確認していたので、気づいてはいたが目に入れようとしなかったユーザーエージェント。
こちらで指定したものではなく、勝手にブラウザが組み込むスタイルシートだそう。
だから、利用者をサポートするようなもので悪さをするなど考えてみなかった。
（大幅に見栄えが変わるのでではなく、ディバイス固有の問題点を解決してくれるようなCSSだとおもっていました）
さらっと調べたら、ユーザーエージェントスタイルシートは、ブラウザ依存との記載がある。
しかし「OS」依存と書かれていなかったことも問題を大きくしてしまった。
IPADでは、Fire FOXでもサファリでもこの現象が起きているから。
それに、今回のボタンのような大幅に見た目が変わるようなものがユーザーエージェントが組み込まれているとは思ってもいなかった。
わかってみれば簡単なのだが、ユーザーエージェントスタイルをキャンセルするcssを組み入れば問題なく表示された。
cssのbefore afterは、面倒なので組み込まなかったが、一応見た目は、これで全体統一感のあるボタンになったので満足。
ここまで4日がかり、ほかの修正もしながらではあったものの、もういやと思ったのは1度2度ではなかった。
