昨日からグーグルクロムだと表示が乱れる

HTML&CSS を勉強してオリジナルサイトを作成しました。
IEでは正常に表示されるのに、昨日よりグーグルクロムでは表示がみだれます。いろいろ試してみたのですが、知識不足の為原因がわかりません。
初心者の為、ソースも未熟です。
よろしくお願い致します。

ヘッダーとナビ（全ページに反映）に改行が入ってしまう。

###該当のソースコード

<table id="header_01"> <tr> <td class="title">共通のテーマは「癒し」｜指から生まれる創造力を楽しむサイト</td> <td class="login"><a href="login.html" style="text-decoration:none;">ログイン</a></td> </tr> </table> <ul id="nav"> <li><a href="index.html">ホーム</a></li> <li><a href="about.html">初めての方へ</a></li> <li><a href="collabo.html">コラボレーター</a></li> <li><a href="contact.php">お問い合わせ</a></li> </ul>


.title {
	font-size: 14px;
}
#nav li {
	display: inline;		/* ナビを横並びにする */
	list-style-type: none;  /* 黒丸を消す */
	padding: 0 12px 0 8px;
}
#nav {
	margin: 0 448px 30px 0;
	padding: 10px 10px 10px 15px;
	background-image: url(../images/navi00.png);
}

###試したこと
cssで、widthの数値を変えてみた。

###補足情報(言語/FW/ツール等のバージョンなど)
オリジナルサイト http://finger-pasochi.com
Google Chrome：バージョン 56.0.2924.76

退会済みユーザー

2017/01/31 03:00

html部分とcss部分をそれぞれ、囲むように「```」だけの行を挿入してみてください。見やすくなりますよ

EMERA

2017/01/31 03:14

教えていただきありがとうございます。今後気をつけます。

kei344

2017/01/31 07:35

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答5件

body{
font-family:ＭＳ Ｐゴシック;
}

とか入れてフォントを変えてあげてください

なぜこうなったかというと、chrome56になった時
デフォルトのフォントがメイリオになったから

http://blog.oyasu.info/2017/01/27/5614/

案外この手の情報はtwitterとかの方が載ってることがあるから、ブラウザが更新されるときはチェックしている

投稿2017/01/31 03:12

date

総合スコア1820

退会済みユーザー

2017/01/31 03:17

気が付きませんでした！横からですが、感謝です＾＾

EMERA

2017/01/31 03:45

ありがとうございます。ブラウザの更新時には気を付けたいと思います。

行動規範の内容に同意します

ちょうど PC 版の Chrome の Ver を上げていなかったので、試してみました。
たしかに最新版に上げた途端、レイアウトが崩れました＾＾；

理由は分かりませんが、Chrome の Ver に依存した現象であることは確からしいですね。
変更箇所から問題箇所が洗い出せるといいのですけど。

＊すみません。VerUP 前の Ver を控え忘れました＾＾；役立たずで申し訳ない。。。
今の Ver は、56.0.2924.76 です。

投稿2017/01/31 03:07

編集2017/01/31 03:09

退会済みユーザー

総合スコア0

EMERA

2017/01/31 03:21

なるほど、昨日、バージョンアップを行ったところです。情報ありがとうございます。

退会済みユーザー

2017/01/31 03:28

VerUP 前の Ver 控えてたら、リリースノート確認する箇所がかなり絞れたはずなんですけどねぇ。。。すまんです＾＾；デフォルトフォントが当たりだといいのだけど。

EMERA

2017/01/31 03:46

すいません。キャッシュの影響でアップロードしても変更したのが反映されなかったようです。

行動規範の内容に同意します

ベストアンサー

.loginのスタイルのwidthを減らしてみたり、.naviのmarginの右マージンの数値を減らしてみればいいかと。

投稿2017/01/31 02:57

turbgraphics200

総合スコア4267

EMERA

2017/01/31 03:08

数値を変更しても固定されているようで、変化がありません。

turbgraphics200

2017/01/31 03:21

ちゃんと試してみましたか？ https://turbographics2000.github.io/riot_test/vscode_problem.gif

EMERA

2017/01/31 03:34

f12で再現できたので、ｃｓｓを変更してアップロードをしているのですが、反映されません。もう少し頑張ってみます。

EMERA

2017/01/31 03:47

ありがとうございます。変更できました。キャッシュの関係で反映されなかったようです。

行動規範の内容に同意します

表示が乱れるとありますが、IEとFFとChromeとSafari（スマホ）で確認した限りレイアウトに変化はありませんでした。
「ヤフーでは正常に」「グーグルクロム」というのがもうすこし具体的にどのようにして確認したのか、正しい表示レイアウトはどういうものなのかを共有いただけませんか。

勝手な想像ですがサイト上部の「バナーロゴ」と「Q&Aヘルプ」の中間にナビがはいる想定だという場合、ナビの格納されているリスト<UL>がtableレイアウト外に記述されているためはじかれているように見えます。

HTML
1<table>
2		<tbody><tr>
3			<td><h1 id="logo"><a href="index.html"><img src="images/fprogo2.png" width="236" height="49" alt="Finger pasochi"></a></h1></td>
4			<td class="help"><a href="QAhelp.html" style="text-decoration:none;">Q&amp;Aヘルプ</a></td>
5		</tr>
6	</tbody></table>
7<ul id="nav">
8	  <li><a href="index.html">ホーム</a></li>
9	  <li><a href="about.html">初めての方へ</a></li>
10	  <li><a href="collabo.html">コラボレーター</a></li>
11	  <li><a href="contact.php">お問い合わせ</a></li>
12	</ul>