【デベロッパーツール・各ブラウザでの違いについて】

Question

現在駆け出しのWeb制作者で、初歩的な質問になりますが申し訳ございません。

chromeのデベロッパーツールでレスポンシブ表示を確認していたところ右側に余白ができており、飛び出している要素が見当たらなかったため各sectionをdisplay:noneで非表示にしていく方法で原因を探していました。

原因であろう場所を見つけたのですがwidthなどにも問題が見当たらず試しにfirefoxで確かめてみたところchromeではある余白が全く出ておらず、この場合どうすれば良いのかを助言していただきたいと思っております。

補足ですがchromeで原因となっている要素のdisplay:noneを解除後リロードすると余白がさらに大きくなる（例えですが、元の余白が２０pxとすると２００pxになるというような感じの）というバグ？も発生しており、再度display:noneを指定すると元の余白に戻リます。こうしたことはchromeではよくあるのでしょうか？

お手数お掛けしますがよろしくお願い致します。

[https://github.com/ko-hei99/kt.git]

Comments

[maisumakun]

現象が再現する、最低限のHTML・CSSをご提示ください。

[kouhei_727]

回答ありがとうございます。
git hubにファイルを載せたのですが初めて行ったので不備があるかもしれません。
申し訳ございませんが問題があれば調べて対応いたしますのでご指摘の方よろしくお願いします。

[退会済みユーザー]

https://validator.w3.org/nu/ に掲示のhtmlをかけると、少なくとも4つのerrorが確認されるので、レンダリングエンジンの解釈の違いが生じてしまう原因の一つかもしれません。

[kouhei_727]

回答ありがとうございます！
実務でこのような差異がある場合はどのように進められることが多いのか、ご意見を頂戴することは可能でしょうか？

[maisumakun]

まずは「エラーが出ないHTML」にしてから議論が始まると思うのですが…

[kouhei_727]

確かに、、当然のことでした。。

初歩的すぎる質問にお時間取っていただき大変感謝しております。
気を悪くされるかもしれないような質問をしてしまい申し訳ございませんでした！
ありがとうございました！