IE7で縮小拡大すると縦書き文字がズレる現象

このQ&Aのポイント
  • IE7で縦書き表示を拡大縮小すると、特定の文字の位置がズレてしまう現象が発生しています。
  • この現象により、縦書き表示が正しく表示されない問題が発生しています。
  • この問題の解決策は見つかっておらず、ズレないようにすることは困難です。
回答を見る
  • ベストアンサー

縦書き文字をIE7で縮小拡大するとズレる

お世話になります。 縦書き表示の画面をIE7で開き、Ctrl+マウスホイールで拡大や縮小表示にすると、ある特定の文字のみ位置がズレてしまう現象が起きています。 ズレないようにはできないものでしょうか。 よろしくお願いします。 以下、サンプルソース。 ---------------------------------------------------------- <html> <head><title>縦書きテスト</title></head> <body> <table border="1"> <tr> <td nowrap><div style="writing-mode: tb-rl">企画</div></td> <td nowrap><div style="writing-mode: tb-rl">編集</div></td> <td nowrap><div style="writing-mode: tb-rl">あ、い、う</div></td> </tr> </table> </body> </html>

  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

スタイルシートに以下の記述を書き加えてください。 height: 6em; text-justify: inter-ideograph; text-align: justify; 高さを指定する height については文字数に合わせて適当に変えてください。 なぜこのような記述でうまく表示できるかは不明ですが、私の場合はたまたまこれでうまく表示できました。

sirowabi
質問者

お礼

なるほど、均等割付ですか! これは盲点でした。。。 ありがとうございます、解決出来ました!m(_ _)m

関連するQ&A

  • CSSで半角文字を横倒しで表示したい

    下記のHTMLソースで、文字の向きを180度回転させて表示する方法はありませんか? 現状、上が右になっていますが、上を左にしたいのです。 本来、縦書き表示ようのスタイルシートですが、 半角英数ですと横倒しになるためかえって都合がいいです。 (IE6だけで動作すればよいです) <html> <body> <div style="writing-mode:tb-rl;">&nbsp;10&lt;Z≤20</div> </body> </html>

    • ベストアンサー
    • HTML
  • ASP.Net ボタン縦書きにしたい

    大変お世話になります。 日夜ASP.Net の勉強をしております初心者でございます。 ボタンコントロールの形状の理由でテキストを縦書きにしたいと思っております。 サイトを調べてみると、 <asp:Button ID="Button1" runat="server" Text="縦書きテスト" Style="writing-mode:tb-rl;" /> という情報を得たのですが、実際この Style="writing-mode:tb-rl;" を記述すると、 writing-mode は認識できるCSSプロパティ名ではありません。 と、エラーになってしまいます。わたくしの記述が間違いなのか、他に方法があるのか、 何卒お教え願えないでしょうか? 何卒よろしくお願いいたします。

  • 全角の縦書きが一定文字数で改行になる。

    こんにちは、 下のプログラムで全角の文字を入力し、縦書きにすると10文字で改行されます。横書きや半角の縦書きでは改行されないようです。 全角の縦書きで改行されないようにするにはどうすればいいでしょうか? 宜しくお願いいたします。 IE7で試しています。 <HTML> <HEAD> <STYLE type="text/css"> <!-- INPUT {font-size: 12px;} --> </STYLE> <SCRIPT language="JavaScript"> <!-- function check(){ var strName; strName = document.nform.textN.value; var test = document.getElementById("test"); test.innerHTML = strName; var tb = document.nform.tbSelect; test.style.writingMode = tb.options[tb.selectedIndex].value; } //--> </SCRIPT> </HEAD> <BODY> <FORM name="nform" > <SELECT name="tbSelect"> <OPTION value="tb-rl">縦書き</OPTION> <OPTION value="lr-tb" selected>横書き</OPTION> </SELECT><BR><BR><br> <INPUT type="text" size="45" name="textN"><BR> <input type="button" value=" 確認 " onClick="check()"> </FORM> <DIV id="test" style="writing-mode:tb-rl;position:absolute;font-size:24px;font-family: Verdana, sans-serif;cursor:hand"> </DIV> </BODY> </HTML> </html>

  • テーブルの一つのtdタグだけ、文字を小さく

    テーブルの一つのtdタグだけ、文字を小さくしたい場合は、 この方法でいいのでしょうか? <html> <head> <title></title> <STYLE type="text/css"> <!-- p { font-size: 20%; } '--> </STYLE> </head> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>普通</td><td>普通</td></tr> <tr><td>普通</td><td><p>test</p></td></tr> </table> </body> </html>

    • ベストアンサー
    • CSS
  • 縦書きにする方法

    一太郎で入力した縦書き文章を、「他形式で保存」で「html文書」にすると、横書きになります。それを縦書きにするため次のような方法を考えていますが、ソースのなかのどこに挿入すべきか、よく分かりません。入れるタグは  http://copicopi.com/text.html の中の「文字」→「文章変化」にあるものです。(変えるべき点があれば教えてください) トップ・ページ以外は「縦書き」のページをいくつか続けるサイトをつくりたいのです。まだ初心者なので、よく分からず、お尋ねした次第です。とりあえず今回は縦書きについてお尋ねしました  下に、本文直前の部分のソースを書いておきます。よろしくお願いします。 <html> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META NAME="GENERATOR" CONTENT="JUSTSYSTEMS Ichitaro22"> <META NAME="CREATIM" CONTENT="18:53:26"> <META NAME="BUILD" CONTENT="2012/10/9"> <META NAME="KEYWORDS" CONTENT=""> <META NAME="JS_HIDE_METAINFO_JUSTSYSTEM_ICHITARO" CONTENT="Do not change this line. ADD_TABLE"> <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> <TITLE>詩</TITLE> </HEAD> <body style="font-size:1em"> <table WIDTH="100%"> <tbody><TR> <td ALIGN="CENTER"> <TABLE> <tbody><TR> <td WIDTH="792" style="font-size:1em"> <DIV>  </DIV> <DIV>  </DIV> <DIV>   <FONT STYLE="font-size:1.43em">鼓   動</FONT> </DIV>     この後に本文

  • HTMLとCSSを駆使して棒グラフを作る際にラベルを表示させたい

    下記のHTMLで、ラベル(30~60の数値)を赤棒の上に表示する書き方をご教示下さい。 Excelグラフで、棒グラフに数値を表示させるようなイメージです。 なお、IE6だけで動作すれば十分です。 <html> <head> <style type="text/css"> .1 {vertical-align: bottom;} .2 {background-color: red;width: 20px; writing-mode:tb-rl;} </style> </head> <body> <table border="0"> <tr> <td class="1"><span class="2" style="height:30px;"></span><span class="3">30</span></td> <td class="1"><span class="2" style="height:40px;"></span><span class="3">40</span></td> <td class="1"><span class="2" style="height:50px;"></span><span class="3">50</span></td> <td class="1"><span class="2" style="height:60px;"></span><span class="3">60</span></td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • ドリームウィーバーで縦書きの文章

     タイトル通りなのですが、span{writing-mode:tb-rl}のスタイルシートを使わずにドリームウィーバーの中の機能だけで横書き(左から右)ではなく、上→下への縦書きにする機能はありますでしょうか。  あるのであれば、操作手順を教えて下さい。お願いします。

  • cssテキスト表示を縦書きにしたいのですが・・・。

    現在ホームページ制作中です。 テキストを縦書きにするため、cssでwriting-modeをtb-rlにしたのですが、ブラウザのIEだと 縦書き表示されるのですが、fireやクロームだと、くずれてしまいます。 どうしたらいいのでしょうか? 教えてください。

  • liタグ中の二つのTABLEの間を埋めたい

    お世話になります。 現在二つのテーブルタグを埋めたくて、思考錯誤中です。 普通にTABLEタグを利用すると、二つのテーブルは隙間なく埋まります。 これをliタグに持っていくと、隙間が発生しております。 これを埋める方法はありませんでしょうか? 何卒よろしくお願いします。 (ちなみに私の環境はIE6です。) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body style="background-color:Black;"> <div> <table> <tr> <td> <table style="background-color: Red;"> <tr> <td> a </td> </tr> </table> <table style="background-color: Red;"> <tr> <td> b </td> </tr> </table> </td> </tr> </table> </div> <ul> <li style="text-align: left; vertical-align: middle;"> <table style="background-color: Yellow;"> <tr> <td> a </td> </tr> </table> <table style="background-color: Yellow;"> <tr> <td> b </td> </tr> </table> </li> </ul> </body> </html>

    • ベストアンサー
    • HTML
  • 指定した文字入力したら自動で送信

    html,php,javascriptで郵便番号から住所を検索する機能を作ってます。 郵便番号を入力して検索をおすと住所が自動で入力されるのはできていて、郵便番号を7文字入力すると検索ボタンをおさないで自動で住所が入力できたりできますか?? ーーーーーーーーーーーーーーーーー <html> <head> <script type="text/javascript" src="postcode/postcode.js"></script> </head> <body style="margin:0px;"> <form name="address" style="margin: 0px;"> <table border="0" cellspacing="10" cellpadding="0"> <tr> <td nowrap>郵便番号</td> <td><input type="text" name="postcode3" style="ime-mode: disabled;"></td> <td><input type="text" name="postcode4" style="ime-mode: disabled;"></td> <td>&nbsp;</td> <td><input type="button" name="GETADDRESS" value="郵便番号から住所を自動入力" onClick="javascript:checkPostcode('address','postcode','city');"></td> </tr> <tr> <td colspan="4" nowrap><input type="text" name="city" style="width: 100%;"></td> </tr> </table> </form> </body> </html>

専門家に質問してみよう