Text Decoration None 効か ない
今日、会社の後輩に「 text-decoration:none; が効かないんです…!」と助けを求められたので、その対処法を主に自分用にまとめました。 なお、修正前のコードは下記のとおりです。
{ display: teble-cell; text-decoration: none;} 細部に違いがあるかもしれませんが…大体このような感じでした。 で、リンクの下線を消したいけれど、textクラスに指定した「 text-decoration: none; 」が効いていないとのこと。 では、さくっと解決策ですが、まず参考にしたサイトはこちら。 Google Chromeでtext-decorationのnoneが効かない件。|Webディレクションやって ます blog 上記のサイトによると、 1. 下方向のパディング(padding-bottom)を1px以上取る 2. displayプロパティをblockまたはinline-blockにする 3. 10. 5px以上のサイズにする。(10pxよりも大きなサイズでレンダリングされる指定を行う) 上記の方法で解決できるとのことでした。 が、試してみたのですが、1 は効果なし、2 に関してはレイアウトが崩れてしまうのでNGでした。 どうしたものか…。 …と思っていたのですが、そもそも、aタグのリンクの下線を消したいんだから、aタグに対して「text-decoration: none;」を指定すればよいのでは? と、いうことで試してみたところ、予感的中! 無事、下線を消すことができました! 変更後のコードはこちら。 display: teble-cell;} #main a { これで解決です。 一度思い込んでしまうと、なかなか違う方法に気付けなかったりするので、後輩にとっては盲点だったんでしょうね。 この記事いいね! ( 13)Google Chromeで:hover時のアンダーラインが出ない場合の対応より引用) ということらしく、確かに僕はこの条件に該当していました。 結果的に解消方法としては、. aの下方向のパディング(padding-bottom)を1px以上取る。(既出) displayプロパティをblockまたはinline-blockにする。 10. 5px以上のサイズにする。(10pxよりも大きなサイズでレンダリングされる指定を行う)。 とのことでした。 まぁ、殆ど出ることはないバグなのかもしれないですが、下線が出る出ない、ってのは実装したら如実に分かるし、UI的にも意味があるものなので、Progressive Enhancementと割り切るのもなかなか難しい内容かと思います。 ということで、自分への備忘録的にPOST。 また福本さん、良記事ありがとうございます!
- わがまま フェアリー ミルモ で ポン
- Text decoration none 効か ない meaning
- Text decoration none 効か ない 5
- Text decoration none 効か ない 2017
- Text-decoration: none;が効かない場合の対処法！ | Qumeruマガジン
- CSSでリンクの下線を消す・色を変える【消えないときの解決法も】 | Webサイト制作の相談室
- Text decoration none 効か ない youtube
- 東京 都 文京 区 白山 2 2.4.7
- Text decoration none 効か ない song
IEの仕様で 「タグにつけた擬似要素(:before, :after)だけtext-decoration:none; をかけようとしても、効いてくれない」 という症状があります。 この際、対応策としては
More than 1 year has passed since last update. cssの が効かない事があったので対処法をまとめてみました。 以下経緯です。 ①最初のコード
{ font-size: 20px; text-decoration: none;} 一番上の親要素に適応させればいいのでは?と思い書いたもの。 結果は 消えませんでした。 ②変更後のコード (mlは変更してません) font-size: 20px;} a { 要素に適応させてみました。 消えました。 Why not register and get more from Qiita? We will deliver articles that match you By following users and tags, you can catch up information on technical fields that you are interested in as a whole you can read useful information later efficiently By "stocking" the articles you like, you can search right away Sign up Logintext-decorationとはテキストの装飾を指定するプロパティです。装飾の種類には下線、上線、取り消し線、点滅があります。同時に複数の装飾を行いたい場合には、値をスペースで区切って記述するとよいでしょう。 以下の値で指定します。 none テキストの装飾を行いません(初期値)。 underline テキストに下線を引きます。 overline テキストに上線を引きます。 line-through テキストに取り消し線を引きます。 blink テキストを点滅させます。 現在、主要なPC用ブラウザでは効果がありません。
Google Chromeだけに起こる 先日このブログの新しいデザインのものを静的なHTMLで作っていました。 まぁ、結果としては、2日ぐらい寝かせると全く気に入らなくなったので、お蔵いりしました(笑) で、問題はそのHTMLを作っている時です。 このブログの右側にもあるいくつかのテキストリンクエリアに、マウスhover時に、下線を消すようにしたくて、 a:hover {text-decoration:none;} を指定したんです。 まぁ、なんという事もない誰でも知ってる書き方です。 なぜかGoogle Chromeで下線が消えない?! そして、いざGoogle Chromeでみてみると・・・マウスを乗せても下線が消えません。 HTMLを書いていてレンダリングチェックに最初Chromeを使っていたので、「あれ? 何か継承間違いしてる? 」と思って色々変えてみたけど、やっぱり変わらない。 ということで問題切り分けを・・・と思い、他のブラウザで見てみたら、ちゃんと動いている。 ますます意味が分からなくなり、「これはバグか? 」と思いぐぐってみるけど、なかなかそれっぽい内容は出てこない。 という中でやっと見つかったのがこちらのブログ。 トップ の classは=""とダブルクオーテーションで囲まないといけない ですよ?