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

Question

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

Comments

[退会済みユーザー]

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

[EMERA]

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

[kei344]

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

Answer 1

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

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

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

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

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

Comments

[退会済みユーザー]

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

[EMERA]

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

Answer 2

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

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

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

Comments

[EMERA]

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

[退会済みユーザー]

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

[EMERA]

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

Answer 3

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

Comments

[EMERA]

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

[turbgraphics200]

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

[EMERA]

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

[EMERA]

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

Answer 4

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

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

<table>
		<tbody><tr>
			<td><h1 id="logo"><a href="index.html"><img src="images/fprogo2.png" width="236" height="49" alt="Finger pasochi"></a></h1></td>
			<td class="help"><a href="QAhelp.html" style="text-decoration:none;">Q&amp;Aヘルプ</a></td>
		</tr>
	</tbody></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>

もう少し具体的に何をしたいのかを明確にできれば、ここのエンジニアさんたちも対処しやすいと思います。

Comments

[EMERA]

Chromeは、ＰＣの場合です。
ヘッダーの文章とnavが改行されてしまうんです。
「バナーロゴ」と「Ｑ＆Ａヘルプ」の下にナビがあるのですが、スマホとは表示のされ方が異なるのですね。

Answer 5

みなさんのアドバイス通り、フォントの追加および数値の変更を行うが反映されず、
試行錯誤ののち、キャッシュクリアを行いました。
FFFTPの更新は、キャッシュクリア後有効となりレイアウトの変更が行えました。