« 横浜さんぽ | トップページ | ホテルローレライばってんの湯 »

visitedのcssがスマホのandroidで効かない件について

自分用のメモ。

スタイルシートの

A:link           { color:#404040; text-decoration:underline ;}
A:visited       { color:#404040; text-decoration:underline ;}
A:hover         { color:#DB7093; text-decoration:none ;}
A:active        { color:#DB7093; text-decoration:none ;}

を全体に掛けて、

一部分をdivで囲って仮にkariと名前を付けて、

そのdivにも

.kari A:link   {color:#ffffcc; text-decoration:underline ;}
.kari A:visited {color:#ffffcc; text-decoration:underline ;}
.kari A:hover  {color:#ffffff; text-decoration:none ;}
.kari A:active  {color:#DB7093; text-decoration:none ;}

と指定してやった場合、パソコンで使っているIE9ではきちんと表示されるものの、スマホで使っているandroid2.3.5ではきちんと表示されなくて困った。

問題はvisitedなのだ。

スマホはタッチスクリーンだからそもそもhoverは関係ない。activeも正直どうでもよい。

しかしlinkとvisitedはちゃんと働いてくれないと困る。

最悪linkとvisitedの区別がつかなくても良い。だが全体に掛かるvisitedとdivに掛かるvisitedの区別はついてもらわないと困る。

どんな風にバグるかというと、visitedの色指定のみdivのcssが働かない。

つまり、全体にかかっている色がそのまま表示される。それもその症状はvisitedだけで、linkはちゃんとdivが効いている。

何故わざわざdivで囲っているかというと、背景色を変えているからで、linkのテキストが共通のカラーだと埋もれてしまって見えないから。

いろいろ試してみたが、visitedの中でもtext-decoration:underlineなどはちゃんとdivが効いているようで、あくまでも変なのはcolorつまり色だけみたいだ。

検索していろいろ調べたけど同じ症状すら発見できず。

さんざんあれこれいじったけど、最終的には背景色を変えることをやめにして、かつリンクの背景色を全部強制的に白にした。

もう考えすぎて一周してしまい、結局一番シンプルで解決にすらならない方法で落ち着いてしまったことが、なんかすっきりしない。

問題の個所 横浜さんぽの目次のところ。

|

« 横浜さんぽ | トップページ | ホテルローレライばってんの湯 »

web」カテゴリの記事

パソコン・インターネット」カテゴリの記事

メモ」カテゴリの記事

日記・コラム・つぶやき」カテゴリの記事

更新情報」カテゴリの記事