1

我在 Firefox 中工作...不确定它是否依赖于浏览器。

Olof 也刚刚在 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 回答