プロが教えるわが家の防犯対策術！

cssのfont-sizeがFirefoxで効かない

解決済

  • 質問者：kirrrrrrrr
  • 質問日時：
  • 回答数：5件

.css 記載したfont-sizeがFirefoxで表示すると、反映されません。IEでは、反映されます。
記載ミス？でしょうか。
colorは反映されます。
どうぞ、よろしくお願いいたします。

CSS部分
td{
color:#663300;
font-size: 10pt;
}

html部分
<td>ああああ<td>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

このQ&Aに関連する最新のQ&A

「HTML サイズ」に関するQ&A： Excelで作ったhtmlファイルのサイズを縮小したい

さらに表示

「Firefox フォント」に関するQ&A： FireFoxフォントのアンチエイリアス

「CSS 順番」に関するQ&A： IEにおいて、CSSの記述順番によって表示が異なる？！

「CSS 効かない」に関するQ&A： javascriptで文字サイズ変更-cssが効かない

「PT とは」に関するQ&A： 野良PTとはなんですか？

A 回答 (5件)

No.5ベストアンサー

  • 回答者： aton
  • 回答日時：

No. 3 です。



> td.title{
> color:red;
> font-size: 10pt;
> }
> <td class=title>
> で、ちゃんと10ptで表示されているのですが。

だとすると，私にはあとは余計な不可視文字が

> td{
> color:#663300;
> font-size: 10pt;
> }

の"font-size"の近辺に入っているなどしか思いつきません。とりあえず確認するか打ち直すかしてみてはどうでしょうか？

それでもだめなら No. 4 の方もいわれるように原因の特定が難しい状況です。ただ現状でもクラス指定して動くのなら，ダミーのクラスを一個つくればとりあえずは凌げるのではないでしょうか？
    • good
    • 0
    • 件
通報する
この回答へのお礼

結局、打ち直しなどをしてもだめで、どういうわけか同じファイル内に
<style>
td{
color:#663300;
font-size: 10pt;
}
</style>
と記入したところ、何故か反映したのでクラスを指定するよりは修正箇所が少なかったので、取りあえずそれで行くことにしました。
後で時間のあるときに、多ファイルなどを見て原因を探して見たいと思います。
ありがとうございました！

通報する
お礼日時：2005/12/28 09:22

No.4

#1 ～ #3 の方の回答とそれぞれへのお礼，補足の文章を拝見させて頂いた上で、



せめて現象が再現する最低限のソースまで絞り、その上でそれを提示して頂かないと、可能性が無数にありすぎます・・・。


特に #1 の方の回答での記述では質問者の環境でどうなっているのか？？？。
これでも IE は OK で FireFox では NG なら、FireFox との問題というよりそのブラウザの設定の問題かと思います（#3 の回答へと向う流れに）

これだと IE も FireFox も OK となると提示されていない部分の影響というか問題というかで・・・。

ＣＳＳの呼び方によっても IE と FireFox で採用される記述が違ったり
記述の順番等での重みの違いで採用される記述の優先度が違ったり
そもそもＨＴＭＬの解釈の柔軟性というか（余計な補正というか）によりＨＴＭＬ自身が異なって扱われている可能性まであり・・・。


正直、採用されている記述のブラウザによる違いと継承，優先度などの合わせによる問題の様な気がします。
    • good
    • 1
    • 件
通報する
この回答へのお礼

コメントありがとうございます。
実は、引継ぎ引継ぎで作っているサイトで、少なくとも今作っている部分はCSSを使っていなかったのでめんどくさいので勝手に作ってしまったのですが、どこかで指定されているのかもしれません。もしくは、指定部分はオープンソースのフレームに組み込まれてるので、そちら側で指定されていて、FireFoxではそちらが優先されてるか・・・
直接の原因は解明されませんでしたが、なんとなく、理由はわかってきました。
ありがとうございました！

通報する
お礼日時：2005/12/28 09:26

No.3

  • 回答者： aton
  • 回答日時：

Firefoxでは設定で最小フォントサイズが指定できます。

それが理由ということはないでしょうか？

例えば最小フォントサイズが12ptに指定されていると，10ptという指定は無効になってしまうはずです。

一度設定を確かめてみてはどうでしょうか？

この回答への補足

コメントありがとうございます。
下記のような部分は、
td.title{
color:red;
font-size: 10pt;
}
<td class=title>
で、ちゃんと10ptで表示されているのですが。
クラス指定が必要とか、他の部分が影響しているとかなのでしょうか？

補足日時：2005/12/27 17:36
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： php504
  • 回答日時：

外部スタイルシートも問題ありませんでした



<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table><tr>
<td>ああああ<td>
</tr></table>
</body>
</html>

#style.css
td{
color:#663300;
font-size: 10pt;
}
    • good
    • 0
    • 件
通報する
この回答へのお礼

コメントありがとうございます。
うーん、でも表示されないのです。
なにか他の部分が影響しているのでしょうか？

通報する
お礼日時：2005/12/27 17:42

No.1

  • 回答者： php504
  • 回答日時：

以下で確認しましたがちゃんと表示されました



<html>
<head>
<style>
td{
color:#663300;
font-size: 10pt;
}
</style>
</head>
<body>
<table><tr>
<td>ああああ<td>
</tr></table>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

コメントありがとうございます。
うーん、でも表示されないのです。
なにか他の部分が影響しているのでしょうか？

通報する
お礼日時：2005/12/27 17:42

このQ&Aに関連する人気のQ&A

「PT とは」に関するQ&A： PTネジとPFネジの違い。

さらに表示

「Firefox フォント」に関するQ&A： Gmailの表示文字を大きくする方法を教えて下さい。

「CSS 効かない」に関するQ&A： background-imageが効かない

「CSS 順番」に関するQ&A： 勝手にログアウトされる

「HTML サイズ」に関するQ&A： textareaで入力した文字を改行したままで表示したいのですが。

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するQ&A

関連するカテゴリからQ&Aを探す

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

Q質問する（無料）

他の専門家の回答をチェック

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family： "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic"；
font-size： 14px；
line-height： 1；
margin： 0；
padding： 0；

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE８だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE９だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか？

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか？

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family： "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic"；
font-size： 14px；
line-height： 1；
margin： 0；
padding： 0；

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

他の回答も見る

QFirefoxで%指定のmargin-bottomが効かない

お世話になっております。

表題の件ですが、現在レスポンシブサイトを作っていて、PC表示の場合はpxでマージンを取っているのですが、960px以下から%指定にしてます。
iPhoneやChrome、safariでは問題ないのですが、Firefoxでのみmargin-bottomの指定が効きません。
px指定にすれば直るのですが、%指定でなぜ効かないのか疑問です。

http://mydesign.mods.jp/trip.html

ご教授の方よろしくお願いいたします。

Aベストアンサー

https://bugzilla.mozilla.org/show_bug.cgi?id=964703
https://bugzilla.mozilla.org/show_bug.cgi?id=958714

Firefoxのバグ濃厚？

他の回答も見る

Qfont-sizeが効かない

html5でHTMLソースを記述しています。

時々、font-sizeが効かない事がありますが、どうしてかわかりますでしょうか？

HTML＞ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

<div class="mainContents">
<a href="#"><span class="r20 t30 b30 right">＜戻る</span></a>
<div class="clear"></div>
</div>

CSS＞ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
.right {
float:right;
}
.r20 {
margin-right:20px;
}
.t30 {
margin-top:30px;
}
.b30 {
margin-bottom:30px;
}
.mainContents {
width:320px;
background-color:#fff;
font-family:"ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:12px;
}

確認ブラウザは、SafariとFireFoxです。

よろしくお願いいたします。

html5でHTMLソースを記述しています。

時々、font-sizeが効かない事がありますが、どうしてかわかりますでしょうか？

HTML＞ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

<div class="mainContents">
<a href="#"><span class="r20 t30 b30 right">＜戻る</span></a>
<div class="clear"></div>
</div>

CSS＞ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
.right {
float:right;
}
.r20 {
margin-right:20px;
}
.t30 {
margin-top:30px;
}
.b30 {
margi...続きを読む

Aベストアンサー

fon-sizeの指定方法はあってますから、その前(font-familyなど)の記述にエラーがあるとか、文字コードがあってないとかだと思います。プロパティの宣言の順番を変えて確認してみる。

HTML5だと
<section>
　<nav>
　　<p><a href="#">＜戻る</a></p>
　</nav>
　<section>
　　<h1></h1>
　</section>
</section>
　でなきゃ変ですね。<div class="main"><div class="clear">なんて、TABLEを使うのと同じ穴の狢(ムジナ)のマークアップへの反省から改定されるのがHTML5ですから。<div class="clear">なんてHTML5を否定している。ましてやclass="right"なんて酷すぎます。
　基本的にdivは使わないと考えたらよいです。

　.rightなんて書き方は、CSS1への後方互換で、本来は単純セレクタ(全称セレクタとタイプセレクタ)につなげて書く。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
全称セレクタが単純セレクタの唯一の構成条件ではない時、アスタリスクを省略することができる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#universal-selector )］より
　↑CSS1との後方互換のために設けられたルール

　当然、
.right {float:right;}
.r20 {margin-right:20px;}
.t30 {margin-top:30px;}
.b30 {margin-bottom:30px;}
な書き方はしない
　このマークアップのままだと
div.mainContens a span.right.r20.30.b30 {float:right;margin:30px 20px 30px 0;}
でよい。　

<section>
　<nav>
　　<p><a href="#">＜戻る</a></p>
　</nav>
　<section>
　　<h1></h1>
　</section>
</section>
と、文書構造を!!明確!!に書くのが【ＨＴＭＬ５】の基本中の基本、そのために多くの構造化要素やセマンティク要素が追加された!!!

よってスタイルシートはCSS2で書けば
section nav {width:100px;float:right;margin:20px 30px 30px 0;clear:right;}
section section{width:100%;}
body section{font-family:・・・・;font-size:12px;width:320px;}
/* 下のように書くと section section{width:100%;}は要らない */
body>section{font-family:・・・・;font-size:12px;width:320px;}



★HTML5は、まだドラフトの段階です。HTML4と違い、ブラウザの対応が完了してから勧告となるのでまだしばらくは使えない。まだまだ頻繁に変更されている。
　その前に、資料の豊富なHTML4.01strictとCSS2を徹底的に身に着けること。そのときに注意するのは、
1) divのclass名はHTML5で採用される構造化要素名やセマンティック要素名(header,footer,section,article,hgroup,nav,figure,aside)を使うこと
　例)
　　<body>
　　　<div class="header" id="TOP">
　　　　<h1></h1>
　　　　<div class="nav">
　　　　　<p><a href=""></a></p>
　　　　<div class="article summary">
　　　　</div>
　　　</div>
　　　　<div class="section">
・・・・・・・・・
　class名にrightとかleft、あるいはr20なんて意味のないものは使わない。セマンティック(意味のある一般的なもの)を使うこと。「<FONT COLOR="red">がだめなら<span style="color:red">を使う」はだめ・・というのと同じです。
　すくなくとも上記calss名は検索エンジンは理解している。

2) HTML4.01【strict】を身に着けておくと(HTML5は4.01strictの改訂版)
HTML5 differences from HTML4 ( http://www.w3.org/TR/2011/WD-html5-diff-20110525/ )
(邦訳)HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/ )
だけ読めばＯＫ

3) 4.01strictの「非推奨」はブラウザが対応すべき要素や属性を含む。著者はstrict以外使えないと読み替える。

4) これはHTML4.01でも書かれているがHTMLは文書構造だけを記述するものを徹底すること
　　clas="right red "などは書かないと言うこと

　HTMLやCSSだけ読んでもなにをしたいか、してるかわかるでしょ!!それがHTML5の本当の意味です。


　

fon-sizeの指定方法はあってますから、その前(font-familyなど)の記述にエラーがあるとか、文字コードがあってないとかだと思います。プロパティの宣言の順番を変えて確認してみる。

HTML5だと
<section>
　<nav>
　　<p><a href="#">＜戻る</a></p>
　</nav>
　<section>
　　<h1></h1>
　</section>
</section>
　でなきゃ変ですね。<div class="main"><div class="clear">なんて、TABLEを使うのと同じ穴の狢(ムジナ)のマークアップへの反省から改定されるのがHTML5ですから。<div class="clear">なんてHTML5を...続きを読む

他の回答も見る

Q

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報