嗨,我正在设计一个小型网站,它可以在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中使用圆形边框,我只需要网站在设计中形象化即可。
谢谢高级

最佳答案

安装chrome框架并尝试,

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

关于html - 关于Internet Explorer 8中的样式图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20048871/

10-10 13:05