Question

因为我很确定这是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中它太短了。我也尝试在链接的左侧和右侧添加填充，但同样的交易。

Answer 1

这是另一个小提琴，适用于所有四种浏览器。和歌剧，好的措施。

我必须将width:290px提供给容器div，将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 个答案: