IE11に奇妙なマージンが付いている問題 - オーバーフローとスムーズなスクロールが関連する可能性があります

Question

ウェブサイトに少し問題があります。plenarto.github.io最後の数日はバグです。

IE11で開くと、ウェブサイトの右側に奇妙な白い余白が表示されます。それは下から上に向かってウェブサイト全体に行きます。あなたは、開発ツールとそれをターゲットに、またしてそれに任意の境界線を追加することはできません。

* { 
border: solid red 1px; 
} 

ホワイトマージンが底に追加の水平スクロールバーを持っているウェブサイトを引き起こします。

オーバーフロー-xを追加すると、問題が解決されますが、垂直スクロールの問題が表示されます（滑らかなスクロールで接続されている可能性があります）。 IE上でoverflow-x：hiddenが追加された場合、ウェブサイトはマウスホイールでまったくスクロールできず、Chromeでは内部リンクがすべて停止します。私はかなりしばらくの間、そのための任意の解決策を見つけるためにしようとしてきた

...

誰もがオーバーフロー-Xを使用せずにそれを取り除くためにその奇妙なマージンの原因であるとどのようにかもしれないものを知っています：隠された？

お時間をいただきありがとうございます。

Answer 1

問題は#projects .main-containerのどこかにあります。このdiv問題にoverflow: hiddenを追加すると消滅します。おそらくプロジェクト項目の1つのマージンがあふれています。

Answer 2

問題は「プロジェクト」セクション内の要素です。特に、クラスproject-container。スタイル全体が適切に実装されていません。あなたは影がバックだけではないdiv自身のために、div内部imgのスタイルをしたい場合は

.project-container { 
    display: inline-block; 
    width: 33%; 
    padding: 20px; 
    box-sizing: border-box; 
} 

：

はこれで試してみてください。また、メディアクエリの幅を調整する必要があるかもしれません。

固定幅の要素にパディング、マージン、境界線、またはシャドウを追加すると、コンテナの外にサイズが大きくなります。ディスプレイ：inline-blockとbox-sizing: border-boxのプロパティを追加することで回避できます。