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 回答