-1

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

任何有答案并渴望告诉我的人？

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

图片示例：

http://postimg.org/image/xi3eurm81/

我的影子盒示例在这里：

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%;
        }
    }
}
4

1 回答 1

1

演示：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;
}

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

然后，我们对图像应用负边距，以将图像“凸出”回边框。

于 2013-09-18T08:50:23.370 回答