5

Firefox で 40% にズームアウトすると画像が消えます。ズーム50%までなら大丈夫です。ただし、ズーム 40% では、消えてしまいます。 ズーム比較 Firefox

Chrome では画像は表示されますが、わずかにずれていますが、これはさまざまなズーム レベルで発生します。 クロムズレ

Internet Explorer は、ズームに関係なく、期待される結果を実際に表示しています!

trident と webkit および geckoの違いは何ですか? また、パッチを適用するにはどうすればよいですか?

関連するすべてのコードは次のとおりです。

body {
  background-color: rgba(31, 59, 8, 1);
}
#main {
  z-index: 1;
  position: absolute;
  top: 113px;
  left: 50%;
  width: 900px;
  height: 100%;
  margin-top: 160px;
  background-image: url('http://i.stack.imgur.com/zZCB2.png'); 
  background-repeat: repeat-y;
  margin-right: -50%;
  text-align: center;
  transform: translateX(-50%);
}
#main:before {
  content: " ";
  position: absolute;
  left: 0px;
  top: -113px;
  background-image: url('http://i.stack.imgur.com/7DE7i.png');
  background-repeat: no-repeat;
  width: 900px;
  height: 113px;
}
#main:after {
  content: " ";
  position: absolute;
  left: 0px;
  bottom: -200px;
  background-image: url('http://i.stack.imgur.com/DVJAq.png');
  background-repeat: no-repeat;
  width: 900px;
  height: 200px;
}
<div id="main"></div>

4

2 に答える 2

2

body.png 画像の高さを 20px 程度にすると、問題が解決します。1px の繰り返し画像が時々おかしくなることがあります。要素がロードされている間の再描画/ちらつきにも役立ちます。

また、「#main:before」の上部を -113px ではなく -112px に設定すると、ズームインしたときに Chrome のファンキーな線がなくなりました (少なくとも私にとっては)。

それが役立つことを願っています。

于 2015-10-26T21:57:59.693 に答える