1

私はFirefoxで作業しています...ブラウザに依存しているかどうかはわかりません。

オロフはChromeでも検証しました。

CSSでピクセルを完全に表示しようとしています。ズームインして見ても。ハイズームでトップバーの境界線が消えてしまうという問題があります。なぜこれが起こっているのか、それを修正するために私が何ができるのかよくわかりません。

これがフィドルです：

http://jsfiddle.net/DsNr2/

これがフィドルのスクリーンショットです

ここに画像の説明を入力してください

境界線が消えるのを確認するには、ズームインする必要があることに注意してください。

画面の片側から次の側への境界線が表示されると思いますが、ズームインするとその間に止まります。

私は、ユーザーがズームインする必要があること（FirefoxではControl +）にはあまり関心がありませんが、自分自身の開発ニーズとすべてが整っていることを確認する必要があります。

上部のバー要素は、原因となるエージェントに絞り込むためにフィドルで削除されています。

これがフィドルのコードです

<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MODULE - NORMALIZE/ALL
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

<style>
body{
  padding:  0px;
  margin:  0px;
  background:  #bfddec;
  line-height: 100%;
}

#A{
  background:  -moz-linear-gradient(top, #009fd0, #008db8);
  background:  -webkit-linear-gradient(top, #009fd0, #008db8);
  border-bottom:  1px solid #007fa5;
}
#Aa{
  position:  relative;
  width:  1000px;
  height:  40px;
  margin-left:  auto;
  margin-right:  auto;
  background:  -moz-linear-gradient(top, #009fd0, #008db8);
  background:  -webkit-linear-gradient(top, #009fd0, #008db8);
}

</style>

<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MODULE - HEADER
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

<div id='A'>
  <div id='Aa'>
  </div>
</div>
4

2 に答える 2

1

div#Aの下部には1pxの境界線があります。divはしません#Aa。 #Aaはよりも広くレンダリングされている#Aため、下部の1pxの境界線が#A停止します。

画面の上部全体に広がるため、代わり#Aaに境界線を適用できます。#Aa

http://jsfiddle.net/DsNr2/9/

于 2012-07-22T20:56:52.063 に答える
1

margin-left：autoおよびmargin-right：auto（margin：0 auto;に凝縮できます）

内側のdivを中央に配置することを意味しているようです。これは、親divに幅がないと発生しません。

多分これはあなたが望むものですか？

#A{
  width: 100%;
}
#Aa{
  position:  relative;
  width:  1000px;
  height:  40px;
  margin-left:  auto;
  margin-right:  auto;
  background:  -moz-linear-gradient(top, #009fd0, #008db8);
  background:  -webkit-linear-gradient(top, #009fd0, #008db8);
  border-bottom:  1px solid #007fa5;
}
于 2012-07-22T21:05:01.270 に答える