关于 Internet Explorer 8 中的样式图像答案

【问题标题】：About style images in Internet Explorer 8关于 Internet Explorer 8 中的样式图像
【发布时间】：2013-12-01 16:00:50
【问题描述】：

您好，我正在设计一个小型网站，它可以在 IE9 Crome 和 Firefox 上完美呈现。但不是在 IE8 中。 te 图像不符合设计，并且不受限制。 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 中不需要圆形边框，我只需要设计中的网站图像脚。提前谢谢你

【问题讨论】：

标签： html css image internet-explorer styles

【解决方案1】：

安装镀铬框架试试，

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

【讨论】：

外地用户呢？他们还必须安装它才能看到我的网站？我需要以一种在 Internet Explorer 8 中看起来不错的方式来设置我的网站的样式。我不需要圆形边框。

【解决方案2】：

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

【讨论】：

我的问题不在于边框，抱歉在这篇文章中添加了它们。我的问题是图像超出了它们应该出现的位置......我的意思是经常出现，大约一半的图像超出了它们应该出现的位置。
对具有正确 div 的子 div 使用左浮动。和父 div 使其成为相对于三个 div 的总框宽度的位置。并将溢出隐藏添加到相应的 div。如果你把小提琴发给我，我可以帮你更多

【解决方案3】：

border-radius 只适用于支持 CSS3 的浏览器。 IE8 不支持。所以弯道是禁区。

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

【讨论】：

我的问题不在于边框，抱歉在这篇文章中添加了它们。我的问题是图像超出了它们应该出现的位置......我的意思是经常出现，大约一半的图像超出了它们应该出现的位置。
我可以访问您的页面吗？我需要更多细节
您好，网络不在线，该网站是由 Pastel（一家销售预制软件的公司）提供的网上商店。我只能更改 CSS，添加一些 javascript、内容和图像，我可以将整个 CSS 和 HTML 发布到某个地方，也许这会起作用？
因为你可以。请附上图片
这个压缩文件保存了网页link我注意到在大屏幕上使用IE8只有背景看起来是错误的（更小），但在小屏幕上所有的图像都保持更大的尺寸比他们应该做的。