Question

我的网站上有一个居中的图片，我需要一个顶部和底部线。这里的问题是，我需要在图像后面的两条线1px，以便它们在图像的顶部和底部“对齐”。我尝试使用box-shadow但它在IE8中不起作用（我知道它很糟糕）。

任何有答案并且急于告诉我的人？

快速更新，向您展示我的问题：我正在使用bootstrap 2并显示图像轮播。当只有一个图像时，该线应该是可见的。它需要能够在IE8中为客户运行。

图片示例：

我的阴影框示例如下：

HTML：

 <div id="artist-carousel">

    <div class="simple-carousel-window">

            <div class="simple-carousel-rail">
                @if (Model != null)
                {
                    for (var i = 0; i < 3 * Model.Images.Count; i++) // times 3 due to infinite scrolling
                    {
                        var index = i % Model.Images.Count;
                    <div class="simple-carousel-div" data-index="@(i)" data-link="@Model.NativeImages[index]">
                        <a class="element">
                            <img  src="@Model.Images[index]" />
                        </a>
                        <a class="fullsize">
                            <img src="~/content/images/carousel-fullsize.png" />
                        </a>
                    </div>
                        if (Model.Images.Count <= 2 && i >= 0) { break; }
                    }
                }
            </div>
            @if (Model.Images.Count >= 3)
            {
                <a class="simple-carousel-prev" href="#" data-slide="prev">
                    <img src="~/content/images/carousel-left.png" /></a>
                <a class="simple-carousel-next" href="#" data-slide="next">
                    <img src="~/content/images/carousel-right.png" /></a>

            }

    </div>
</div>

CSS：

.simple-carousel-window {
    width: 820px;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    display: block;
    margin-left: -20px;
    box-shadow: inset 0 2px 2px -2px #ebebeb, inset 0 -2px 2px -2px #ebebeb;
    line-height: 0;
    margin-bottom: 20px;

    .simple-carousel-rail {
        font-size: 0;
    }

    .simple-carousel-prev {
        position: absolute;
        top: 150px;
        left: 10px;
        display: block;
        opacity: 0.8;
    }

    .simple-carousel-next {
        position: absolute;
        top: 150px;
        right: 10px;
        display: block;
        opacity: 0.8;
    }

    .simple-carousel-div {
        display: inline-block;
        position: relative;
        .element {
            img {
                height: 360px;
                float: left;
            }
        }

        .fullsize {
            display: block;
            opacity: 0.5;
            position: absolute;

            // centering image
            top: 150px;
            margin-left: -85px; 
            left: 50%;
        }
    }
}

Answer 1

DEMO： http://jsfiddle.net/CXKrh/

HTML

<div>
    <img src="http://placekitten.com/100" />
</div>

CSS

div {
    width: 300px;
    height: 98px;
    overflow: visible;
    border: 1px solid red;
}
div > img {
    height: 100px;
    margin-top: -1px;
}

想法是容器的高度=图像高度 - 边框宽度（顶部和底部）

然后，我们对图像应用负边距，以便＆＃34; bump＆＃34;图像回到边界。

图像背后的线条（顶部和底部）

1 个答案:

HTML

CSS