IE 和 Safari 添加额外的填充答案

【问题标题】：IE and Safari add extra paddingIE 和 Safari 添加额外的填充
【发布时间】：2014-02-11 22:59:36
【问题描述】：

因为我很确定这是XY Problem 的一个实例，所以我将从Y 开始。我有一个 300 像素宽的图像，我想要图像下方的三个链接，与它齐平。最后一个链接需要增大大小以填充剩余空间。

现在是 X。我的标记在 Chrome 和 Firefox 中完美运行，但在 IE 和 Safari 中，第三个链接太大了 2px。

为了您的复制/粘贴乐趣：

<head>    
    <style type="text/css">
        .breakfast
        {
            text-transform: uppercase;
            padding: 10px 25px;
            margin: 5px -5px;
            font-family: Arial, Sans-Serif;
            font-size: 14px;
            font-weight: bold;
            background-color: #d9e021;
            color: #00add0;
            text-align: center;
            text-decoration: none;
            display: inline-block;
        }

        .breakfast:hover
        {
            text-decoration: none;
            background-color: #bdc400;
            color: #0198b6;
        }
    </style>
</head>
<body>
    <div>
        <img src="my_awesome_image.jpg" width="300"
            height="190" alt="My awesome image." />
    </div>
    <div style="margin-left: 5px; margin-top: -5px;">
        <a class="breakfast" href="#">BOSTON </a>
        <a class="breakfast" href="#">CHICAGO </a>
        <a class="breakfast" href="#" style="width: 38px;">DC </a>
    </div>
</body>

或jsFiddle，由Mr.Lister 慷慨提供。

所以最后一个链接，“DC”在 Safari 和 IE 中超出图像 2px。如果我剃掉 2px，它在 Chrome 和 Firefox 中太短了。我还尝试在链接的左侧和右侧添加填充，但同样处理。

【问题讨论】：

mhm，如果它对您来说是一个主要错误，您可以添加浏览器检测。我不知道有任何其他解决方法
我做了一个jsFiddle。下一次，你成功了，好吗？
@MrLister 谢谢，但是SSCCE 不再被接受了吗？
小提琴更容易使用。现在我没有解决方案，但我确实找到了解决方法。 Here。只需给图片下方的 div 相同的宽度和背景颜色，不要介意其内容的宽度。
@MrLister 感谢您使用它，但这会使悬停效果变得很糟糕。无论哪种方式，我都不是特别讨厌，但设计团队不会对我满意。 :(

标签： html css cross-browser padding

【解决方案1】：

这是另一个小提琴，适用于所有四种浏览器。还有歌剧。

我确实必须将width:290px 给容器div 和width:33px; float:right 给最后一个a。

http://jsfiddle.net/MrLister/pX6S7/13/

仍然不确定为什么会这样，而原版却不行。对不起。哦，宽度听起来可能是随机的，但这是由 5px 和 -5px 边距引起的。他们确实加起来了。

【讨论】：

所以这只是一些奇怪的跨浏览器的事情，我不会失去理智吗？这是一种解脱。

【解决方案2】：

我为你做了一个小提琴

http://jsfiddle.net/5ve6U/3/

不要对这个小提琴中图像容器的不同宽度/高度感到困惑，我这样做只是为了在边框的帮助下查看完整宽度

仅重置正文边距/填充并更改您的 /padding/margin

.breakfast {
    padding: 10px 24px;
    margin: 5px -3px;
}

在 IE 中对我来说很好用

【讨论】：

但是你怎么能看到 div 的宽度呢？旁边有一个 300 像素的图像，这会容易得多。