关于 Internet Explorer 8 中的样式图像

Question

嗨，我正在设计一个小网站，它在IE9 Crome和Firefox上完美呈现。但在IE8中不是。这些图像不会立足于设计，它们会受到限制。HTML 片段：

<div id="MainImage1"><img src="Stores/DigitalExperience/ArticleImages/mainBanner.jpg" border="0" width="100%"></div>
<div id="product-table">
<div id="product1" class="product-column">
<a href="Main.asp?D=%7BF526E79F%2D78C3%2D4703%2D9CF5%2D4CEF53FCD0D7%7D&amp;PageType=Product&amp;SKU=GAL-I9190-WHT"><img src="Stores/DigitalExperience/ProductImages/S4MINIWHT_small.jpg" valign="middle" border="0">&nbsp;SAMSUNG GALAXY S4-WHITE</a>   
</div>
<div id="product2" class="product-column">
<a href="Main.asp?D=%7BF526E79F%2D78C3%2D4703%2D9CF5%2D4CEF53FCD0D7%7D&amp;PageType=Product&amp;SKU=GAL-I9500-BLK"><img src="Stores/DigitalExperience/ProductImages/s4-i9500_small.jpg" valign="middle" border="0">&nbsp;GALAXY SAMSUNG S4 BLK</a>
</div>
<div id="product3" class="product-column">
<a href="Main.asp?D=%7BF526E79F%2D78C3%2D4703%2D9CF5%2D4CEF53FCD0D7%7D&amp;PageType=Product&amp;SKU=UA32F5500-1-000"><img src="Stores/DigitalExperience/ProductImages/UA32F5500_small.jpg" valign="middle" border="0">&nbsp;32 INCH LED TV</a>
</div>

那么设置此代码样式的 CSS 是这样的：

#MainImage1 {
border-style: solid;
border-width: 1px;
border-color: #0000ff;
-webkit-border-top-right-radius: 25px;
-webkit-border-bottom-left-radius: 25px;
-moz-border-radius-topright: 25px;
-moz-border-radius-bottomleft: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
margin: 0;
padding:0;   
}
#product-table{
display: table;
}
#product-table .product-column {
-webkit-border-top-right-radius: 25px;
-webkit-border-bottom-left-radius: 25px;
-moz-border-radius-topright: 25px;
-moz-border-radius-bottomleft: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-style: solid;
border-width: 1px;
border-color: #0000ff;
display: table-cell; 
width: 30%; 
padding: 10px; 
}
#product-table .product-column:nth-child(even) { 
background: #ccc;
}
#product-table .product-column:nth-child(odd) { 
background: #eee;
}
TD.MainAreaText img {
-webkit-border-top-right-radius: 25px;
-webkit-border-bottom-left-radius: 25px;
-moz-border-radius-topright: 25px;
-moz-border-radius-bottomleft: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
position: relative;
}

关于如何使此代码在IE8中呈现体面的任何想法，我现在在IE8中不需要圆形边框，我只需要网站图像在设计中。提前谢谢你

Answer 1

安装铬框架并尝试，

http://www.google.com/chromeframe?prefersystemlevel=true

Answer 2

你需要使用像 CSS3 pie 这样的 polyfill。 这是链接 http://css3pie.com/demos/border- 半径/

Answer 3

边框半径只适用于支持CSS3的浏览器。IE8 不支持它。所以角落将禁止进入。

这可能有助于您解决此问题：http://jquery.malsup.com/corner/