none
font-familyが効きません。 RRS feed

  • 質問

  • いつもお世話になっております。

    以下のコードをIEでみると
    プルダウンの中身の表示のされ方が
    使用するIEにより異なります。

    (使用するIE)
    ・IE8
    ・IE11(64ビット)
    ・IE11(32ビット)

    IE11(32ビット)も
    IE8、IE11(64ビット)の様に、
    : 式社 テストの位置を全て同じ箇所に表示したいのですが、
    どのようにすれば同じ箇所に表示されるのでしょか?

    (プルダウンの中身の表示のされ方)
    ・IE8、IE11(64ビット)
     テスト小一郎      : 式社 テスト
     テス ト              : 式社 テスト
     テス 小一          : 式社 テスト
     テス 小二          : 式社 テスト

    →: 式社 テストの位置が全て同じ箇所に表示されます。

    ・IE11(32ビット)
     テスト小一郎      : 式社 テスト
     テス ト       : 式社 テスト
     テス 小一        : 式社 テスト
     テス 小二        : 式社 テスト

    →: 式社 テストの位置がずれて表示されます。

    【コード】
    <html>
        <form>
          <table>
            <tr>
              <th>担当者ID</th>
              <td>
                <select name="identifier" style="font-family:'MS ゴシック';"><option value="1">テスト小一郎&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;式社&nbsp;テスト</option>
    <option value="W6">テス&nbsp;ト&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;式社&nbsp;テスト</option>
    <option value="E2">テス&nbsp;小一&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;式社&nbsp;テスト</option>
    <option value="0001">テス&nbsp;小二&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;式社&nbsp;テスト</option>
                </select>
              </td>
            </tr>
          </table>
        </form>
    </html>

    以上です。
    よろしくお願いいたします。

    2014年3月17日 8:17

回答

すべての返信

  • 再現しませんでした(´・ω・`)
     
    IE11(32bit)で次のように表示されました。
    ローカルファイルをそのまま開きました。
     

    IE11 32bitで表示

    • 回答の候補に設定 星 睦美 2014年3月26日 1:51
    2014年3月24日 15:24
  • font-familyが効かないとのことですが、表示はどのようになっていますか?実際の画面キャプチャと IE が動作している Windows のバージョンを添付すると回答が得られるかもしれません。

    今ある情報から推測できる原因としては、

    - サブピクセルのレンダリングにより字詰が異なるため
    - 一部で等幅フォントでないフォントが適用されているため(端末上に該当フォントがインストールされていない)

    あたりかなと思います。

    • 回答の候補に設定 星 睦美 2014年3月26日 1:51
    2014年3月25日 3:34
  • ご連絡ありがとうございます。

    Windowsのバージョンは、
    Windows7 professional ServicePack1
    です。

    画面は、以下のようになります。

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

    2014年3月27日 1:44
  • 画面が送れていないので、再度お送りします。

    

    2014年3月27日 1:54
  • 前にも言いましたが、ユーザ補助で、webページで指定されたフォントスタイルを使用しない、は付けてないんでしょうね。

    あるいは、ユーザ補助で、ユーザスタイルシートを指定して、そこでフォントスタイルを上書きしているとか。

    2014年3月27日 12:51
  • 検証してみました。おそらく、次が解決方法です。

    原因: option 要素にフォントが適用されていない

    解決方法 A

    option 要素に select の font-family を継承させる(もしかしたらうまくいかないかも)

    (ただし、CSS の詳細度により、うまく上書きできないことがあります)

    option{font-family: inherit;}

    解決方法 B

    CSS を書いて option にも等幅フォントを適用する

    select, option{
        font-family: "MS ゴシック","MS Gothic";
    }

    解決方法 C

    すべての <option> タグに style 属性を指定する

    <select>
      <option style="font-family: "MS ゴシック","MS Gothic";">...</option>
      <option style="font-family: "MS ゴシック","MS Gothic";">...</option>
      <option style="font-family: "MS ゴシック","MS Gothic";">...</option>
    </select>
    2014年3月27日 17:48
  • ご連絡ありがとうございました。
    まさかとは思い設定を確認したところ、
    「webページで指定されたフォントスタイルを使用しない」に
    チェックが入っておりました。
    大変申し訳ございません。

    チェックをはずしたところ、
    プルダウンの中身の表示位置が揃いました。

    ありがとうございました。
    2014年3月28日 2:13