IE和Safari添加额外的填充

Question

由于我相当确定这是XY问题的一个实例，因此我将从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 ，由Lister 先生慷慨地提供。

因此，最终的链接“ DC”在Safari和IE中超出图像2px。 如果我剃掉2px，则在Chrome和Firefox中太短了。 我也尝试过在链接的左侧和右侧添加填充，但处理相同。

Answer 1

这是另一个小提琴，可在所有四个浏览器中使用。 和歌剧，很好。

我也得给width:290px到容器div和width:33px; float:right width:33px; float:right到最后a 。

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

仍然不知道为什么会这样，而原来的却不行。 抱歉。 哦，宽度听起来似乎是随机的，但这是由5px和-5px的边距引起的。 他们加起来。

Answer 2

我帮你弄个小提琴

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

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

只重置身体边缘/填充并更改您的/填充/边距

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

在IE中对我来说效果很好

IE和Safari添加额外的填充

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-02-11 14:59:36

解决方案2
0 2014-02-11 14:50:07

IE和Safari添加额外的填充

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-02-11 14:59:36

解决方案2 0 2014-02-11 14:50:07

解决方案1
1 已采纳 2014-02-11 14:59:36

解决方案2
0 2014-02-11 14:50:07