Question

使用母版页在asp.net中处理新的网站设计。该页面的标题是一个35像素高的“菜单栏”，其中包含一个呈现为无序列表的asp菜单控件。

所选菜单项的样式为不同颜色的背景，左上角和右侧各有2px边框。所选菜单项的底部应与菜单栏的底部对齐，以便所选的“选项卡”看起来好像流入下面的内容。在firefox和IE中看起来很好但在chrome中“tab”似乎比菜单栏的底部高1个像素。

只是想知道是否存在某种我不知道的错误。

我意识到你很可能需要代码来帮助解决这个问题，所以要尽快发布css。

编辑：

这是菜单的CSS ...

div.hideSkiplink
{     
    width:40%;
    float:right;
    height:35px;
}

div.menu
{
    padding: 0px 0px 0px 0px;
    display:inline;
}

div.menu ul
{
    list-style: none;
}

div.menu ul li
{
    margin:0px 4px 0px 0px;
}

div.menu ul li a, div.menu ul li a:visited
{
  color: #ffffff;
  display: block;
  margin-top:0px;
  line-height: 17px;
  padding: 1px 20px;
  text-decoration: none;
  white-space: nowrap;
}

div.menu ul li a:hover
{
  color: #ffffff;
  text-decoration: none;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: none;
  border-left: 1px solid #fff;
}




div.menu ul li a:active
{
 background:#ffffff !important;
 border-top:2px solid #a10000;
 border-right:2px solid #a10000;
 border-bottom: none;
 border-left:2px solid #a10000;
 color: #000000 !important;
 font-weight:bold;

}


div.menu ul a.selected
{
  color: #000000 !important;
  font-weight:bold;
}

div.menu ul li.selected
{
 background:#ffffff !important;
 border-top:2px solid #a10000;
 border-right:2px solid #a10000;
 border-bottom: none;
 border-left:2px solid #a10000;
}

div.menu ul li.selected a:hover
{
  border: none;
}

通过jquery ...

将所选类添加到li和元素中

以下是问题的截图... chrome示例位于顶部，您可以在选项卡下方看到1px的红色边框。在底部是firefox图像，其中一切看起来都不错。

alt text

编辑：

在玩了这个之后，我发现它实际上是“标题”div本身在chrome中增长了1px ......这对我来说似乎很奇怪。

Answer 1

这些答案都没有解决问题。

集：

line-height: 1;
padding-top: 2px;

因为webkit＆amp; mozilla渲染引擎以不同的方式实现行高不要使用它来操纵单行项的测量。

对于菜单，按钮等特别是非常小的通知气泡等项目，请将行高重置为正常，并使用填充或边距使其行为相同。

这是一个说明此问题的JSFiddle： http://jsfiddle.net/mahalie/BSMZe/6/

Answer 2

我遇到了同样的问题，我通过在<li>元素中明确设置行高和字体大小来解决它，该元素包含作为标签链接的<a>元素。希望这可以帮助将来的某个人。

（已编辑的html链接）

Answer 3

这是我在我的一些网站上遇到的一个常见问题...当它的IE具有像素差异时，我通常只能在我的IE样式表中添加一个margin / padding像素。但是当它是Safari / FireFox / Chrome时，我通常只使用像素并让FireFox人群感到高兴（现在 - 直到Webkit统治网络！），即使在相反的浏览器中看起来有点奇怪。

但是，您可能还想查看包含ul或div元素的行高值（或添加值，如果没有值）。修补它允许我在FireFox，Chrome和IE中获得完全相同的填充。

Answer 4

以下是我在this page中找到的解决方案：

   button::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

Answer 5

我一直在与这个问题作斗争一段时间，几乎放弃了这个像素。然而，在其中一个eurika时刻，它来到我身边：如果你在Chrome中完全排列标签（在Firefox中留下重叠），将ul高度设置为li的高度（包括任何填充），你可以删除通过在ul。

上设置溢出来隐藏Firefox中的违规像素

希望这有助于那里的人！

Answer 6

我有完全相同的问题，结果是chrome已将缩放设置为110％并且这打破了菜单。当我在另一台计算机上启动镀铬时，我注意到它看起来很好。

Answer 7

我的主要标签在Chrome中显示它们时遇到了同样的问题，它们的高度只有一个像素，并且在标签和主机的白色背景之间留下了一条丑陋的缝隙。

我通过给tab div一个带有浮动值的上边距来解决问题。首先尝试了margin-top：0.1px，然后是0.2等等，直到0.5的上限，所有主流浏览器都显示的一切都很好。

Answer 8

重要的是要意识到网页在不同浏览器中的呈现方式总是不同。实现像素完美是徒劳的，现在我尝试向我的客户解释使每个浏览器渲染网站完全相同所需的成本。现在更常见的是，他们知道IE6和FF4不会以相同的方式呈现任何页面。我们必须努力让客户理解并接受网络的动态。

渐进增强和优雅降级。和平。

Answer 9

我遇到了与透明背景文本相关的问题。

我无法使上述任何解决方案始终如一地工作，所以我最终使用webkit hack为这些浏览器提供了不同的行高。像这样：

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .your-class {
        line-height:20px;
    }
}

哎呀，哈基！我试图避免CSS黑客但我找不到另一种方式。我希望能帮助别人。

Answer 10

我设法通过设置以下内容，使用我正在使用的网络字体解决了这个问题：

.some-class {
    display: inline-table;
    vertical-align: middle;
}

认为它有点hacky但是完成了这项工作。它确实意味着您将拥有专门用于Internet Explorer的目标样式

Answer 11

我有一个类似的问题，这是由于使用ems的字体大小，边距和填充。浏览器以不同的方式对ems进行舍入，并根据内容的长度在整个站点上引起间歇性的1px问题。一旦我将所有内容都改为像素测量，我的问题就消失了。

希望这有帮助！

Answer 12

尝试使用display：block with a element“ 例如...

<li><a href="">Link</a></li>

的CSS：

li{line-height:20px;}/*example only*/

li a{display:block;}

Answer 13

我想这是唯一的方法，为不同的浏览器使用不同的样式有问题的部分

/* FOR MOZILLA */
@-moz-document url-prefix() { 
.selector {
 color:lime;
}
}
/* FOR CHROME */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
/* Safari and Chrome, if Chrome rule needed */
.container {
 margin-top:100px;
}
/* Safari 5+ ONLY */
::i-block-chrome, .container {
 margin-top:0px;
}``

Answer 14

如果line-height用于垂直对齐容器中的文本（它不应该这样），那么跨浏览器的一致行为可以强制执行：

line-height: 75px
height: 75px
overflow: hidden

Answer 15

你也可以为mozila制作不同的CSS：

@-moz-document url-prefix{
    // your css
}

也可以使用：

let arrayOfObjects = [["text":"ORANGE", "color":UIColor.orangeColor(),"status":false] as NSMutableDictionary ,["text":"PURPLE", "color":UIColor.purpleColor(),"status":false] as NSMutableDictionary,["text":"BLUE", "color":UIColor.blueColor(),"status":false] as NSMutableDictionary,["text":"GRAY", "color":UIColor.grayColor(),"status":false] as NSMutableDictionary,["text":"YELLOW", "color":UIColor.yellowColor(),"status":false] as NSMutableDictionary];

override func awakeWithContext(context: AnyObject?) {
    super.awakeWithContext(context)

    tableOutlet.setNumberOfRows(arrayOfObjects.count, withRowType: "row")

    for (var i = 0; i < arrayOfObjects.count; i++) {

        let row = tableOutlet.rowControllerAtIndex(i) as? RowController
        row?.updateData(arrayOfObjects[i] as NSMutableDictionary);
    }

}

override func table(table: WKInterfaceTable, didSelectRowAtIndex rowIndex: Int) {

    let selectedRow = tableOutlet.rowControllerAtIndex(rowIndex) as? RowController

    for (var i = 0; i < arrayOfObjects.count; i++) {

        let row = tableOutlet.rowControllerAtIndex(i) as? RowController

        //-- 
        let data = arrayOfObjects[i] as NSMutableDictionary
        data["status"] = (row == selectedRow);

        row?.updateData(arrayOfObjects[i] as NSMutableDictionary);
    }
}


class RowController: NSObject {

@IBOutlet var labelOutlet: WKInterfaceLabel!
@IBOutlet var groupOutlet: WKInterfaceGroup!

   func updateData(data:NSMutableDictionary){

    let labelValue = data["text"] as! String
    let color = data["color"] as! UIColor
    let status = data["status"] as! Bool

    //--
    self.labelOutlet.setText(labelValue)
    self.groupOutlet.setBackgroundColor(status ? color :  UIColor.blackColor());

   }//F.E
}

Answer 16

我可能是CSS的初学者，但我在W3Cschools.com中找到了同样的问题，在他们的一个例子中。

http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav

这个例子是关于图像精灵的。您可以在此示例中看到，在Chrome中，主图标和prev图标具有1px分隔线，而Firefox中并非如此。

在Chrome中，像素数与Firefox的像素数相差1像素。

Firefox和Chrome之间的像素线高度差异为1

16 个答案: