0

我在 Internet Explorer 中查看我的网站时遇到问题。在下面的 CSS/HTML 中，图像应该是轮廓的、弯曲的半径，并被缩放以适应。但是 IE 8 不会缩放图像、弯曲角落，也不会出现轮廓。这是 jsfiddle： http: //jsfiddle.net/pave4/ 这个页面在最新的 IE (IE8) 中很好，但是我需要确保它也适用于旧版本的 IE。

HTML：

<ul>
<li>
    <a href="/aboutme/">
    <span class="img-outline"><span class="page-img" id="aboutme"></span></span>
    <span class="page-title">About Me</span>
    </a>
</li>
</ul>

​ CSS：

.page-title {
      text-align: center;
      display:block;
      text-decoration: none;
}

.img-outline {
  height: 100%;
  background: rgba(0, 0, 0, .3);
  padding: 5px;

  display: block;   
  margin-left: auto;   
  margin-right: auto;

  -webkit-border-radius: 18%;
  -moz-border-radius: 18%;
  border-radius: 18%;
}

.page-img {
  height: 100%;
  background: rgba(50, 50, 50, 1);
  background-size:115px 115px;
  background-repeat:no-repeat;

  display: block;   
  margin-left: auto;   
  margin-right: auto;

  -webkit-border-radius: 15%;
  -moz-border-radius: 15%;
  border-radius: 15%;
}

li,
li.current,
li.current:visited {
    margin-left: 1px;
    margin-right: 1px;
    width: 118px;
    height: 112px;
    display: block;
    float: left;
    position: relative;
    opacity: .6;
}

li:hover { opacity: 1; }

li .img-outline {
  width: 70px;
  height: 70px;
}

li .page-img {
    background-size:70px 70px;
}

li #aboutme {
    background-color: rgb(36, 112, 245);
    background-image: url('http://www.rasnickjewelry.com/images/uploads/900_Animals_300/901_Elephant_Head_Ring_side_R300.jpg');
}

​</p>

4

3 回答 3

4

恐怕您正在使用许多 IE8 不支持的 CSS3 属性。

于 2012-07-25T23:13:03.557 回答
1

正如我在对您的原始问题的评论中所说，高达 8 的 IE 不支持 rgba 颜色。由于您不使用 alpha 通道，因此请background-color: #323232;改用。

IE8 也不支持标准opacity属性，您需要filter: alpha(opacity=60);代替（百分比值没有 %）。相关的可能是 IE 中的元素需要layout正确呈现：有很多文章涵盖了这个主题。一个好的是On Have Layout。

要了解支持的 CSS 属性和功能，请使用资源，例如When Can I Use或Quirksmode

于 2012-07-27T08:49:17.683 回答
0

不要调整带有样式的图像大小，以精确的大小上传它们，这将节省您的加载时间。

关于边框半径等其他样式尝试使用此工具http://css3pie.com/

于 2012-07-25T23:23:01.613 回答