在 Internet Explorer 中从图像中删除边框

Question

有谁知道如何去除本示例中 Internet Explorer 中字形图标周围显示的浅色边框边框。在 chrome 中，这不会显示。

http://www.prepbootstrap.com/bootstrap-template/iconpanels

Answer 1

您也可以使用box-shadow 代替border：

.icon {
    text-align: center;
    position: relative;
}

.info {
    margin-top: -24px;
    background: hsla(0, 0%, 0%, 0.04);
    border: 1px solid hsl(0, 0%, 88%);
    padding: 15px 0 10px 0;
}

.image {
    position: relative;
    z-index: 2;
    margin: auto;
    width: 76px;
    height: 76px;
    /* border: 7px solid hsl(0, 100%, 100%); */
    line-height: 76px;
    border-radius: 50%;
    background: hsl(126, 37%, 55%);
    vertical-align: middle;
    -webkit-box-shadow: 0 0 0 7px white;
    -moz-box-shadow: 0 0 0 7px white;
    box-shadow: 0 0 0 7px white;
}

.icon:hover .image {
    -webkit-box-shadow: 0 0 0 7px black;
    -moz-box-shadow: 0 0 0 7px black;
    box-shadow: 0 0 0 7px black;
}

.image .glyphicon {
    font-size: 38px;
    line-height: 1.33;
    color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="box">
    <div class="icon">
        <div class="image"><span class="glyphicon glyphicon-envelope btn-lg white"></span></div>
        <div class="info">
            <h3 class="title">Messages</h3>
            <p>
                7 new messages over the past 24 hours. 
            </p>
            <div class="more">
                <a href="#" title="Title Link"><i class="fa fa-plus"></i> Details
                </a>
            </div>
        </div>
    </div>
    <div class="space"></div>
</div>

Answer 2

为.box > .icon > .image添加background-clip: content-box

.white {
    color: white;
}
.btn-lg {
    font-size: 38px;
    line-height: 1.33;
    border-radius: 6px;
}
.box > .icon {
    text-align: center;
    position: relative;
}
.box > .icon > .image {
    position: relative;
    z-index: 2;
    margin: auto;
    width: 88px;
    height: 88px;
    border: 7px solid white;
    line-height: 88px;
    border-radius: 50%;
    background: #63B76C;
    vertical-align: middle;
    background-clip: content-box;
}
.box > .icon:hover > .image {
    border: 4px solid black;
}
.box > .icon > .image > i {
    font-size: 40px !important;
    color: #fff !important;
}
.box > .icon:hover > .image > i {
    color: white !important;
}
.box > .icon > .info {
    margin-top: -24px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid #e0e0e0;
    padding: 15px 0 10px 0;
}
.box > .icon > .info > h3.title {
    color: #222;
    font-weight: 500;
}
.box > .icon > .info > p {
    color: #666;
    line-height: 1.5em;
    margin: 20px;
}
.box > .icon:hover > .info > h3.title, .box > .icon:hover > .info > p, .box > .icon:hover > .info > .more > a {
    color: #222;
}
.box > .icon > .info > .more a {
    color: #222;
    line-height: 12px;
    text-transform: uppercase;
    text-decoration: none;
}
.box > .icon:hover > .info > .more > a {
    color: #000;
    padding: 6px 8px;
    border-bottom: 4px solid black;
}
.box .space {
    height: 30px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-lg-4">
            <div class="box">
                <div class="icon">
                    <div class="image"><span class="glyphicon glyphicon-list-alt btn-lg white"></span>
                    </div>
                    <div class="info">
                         <h3 class="title">Tasks</h3>

                        <p>12 pending tasks awaiting approval and review.</p>
                        <div class="more"> <a href="#" title="Title Link"><i class="fa fa-plus"></i> Details
                            </a>

                        </div>
                    </div>
                </div>
                <div class="space"></div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-lg-4">
            <div class="box">
                <div class="icon">
                    <div class="image"><span class="glyphicon glyphicon-envelope btn-lg white"></span>
                    </div>
                    <div class="info">
                         <h3 class="title">Messages</h3>

                        <p>7 new messages over the past 24 hours.</p>
                        <div class="more"> <a href="#" title="Title Link"><i class="fa fa-plus"></i> Details
                            </a>

                        </div>
                    </div>
                </div>
                <div class="space"></div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-lg-4">
            <div class="box">
                <div class="icon">
                    <div class="image"><span class="glyphicon glyphicon-volume-up btn-lg white"></span>
                    </div>
                    <div class="info">
                         <h3 class="title">Mentions</h3>

                        <p>47 new mentions for the past week.</p>
                        <div class="more"> <a href="#" title="Title Link"><i class="fa fa-plus"></i> Details
                            </a>

                        </div>
                    </div>
                </div>
                <div class="space"></div>
            </div>
        </div>
    </div>
</div>

Answer 3

添加background-clip: content-box

.box > .icon > .image{
   background-clip: content-box;
}