圓角與插件到IE 7中的圖像？
[英]rounded corners with plugin to an image in IE 7?
問題描述
最后，我向老板說服不要再使用四舍五入的圖像了，
所以我想將它們全部轉換為具有CSS邊框半徑的html。 問題是我們仍然需要Internet Explorer 7的支持，而解決方案似乎在此jquery plugin中 。
事實是，在官方網站上，即使IE 6也能正常工作，但我只能在Firefox或Chrome中運行它（這是無用的，因為它們已經支持邊界半徑了）
我就是這樣想的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.rounded5').corner();
});
</script>
</head>
<body>
<img src="http://images.wikia.com/logopedia/images/d/dc/TRYP_by_Wyndham_logo.png" style="width:50%;" alt="trip" class="rounded5" />
</body>
</html>
這是證明http://jsfiddle.net/MKvHu/2/
知道我缺少什么嗎？
謝謝！！
2 個解決方案
解決方案1
3 2011-10-18 19:14:47
為什么不嘗試CSS3PIE ？
解決方案2
2 2011-10-18 19:10:08
尚未明確指出，但看起來插件無法使img元素的邊緣變得圓滑：
重要的是要了解這個角落插件通過向頁面添加更多元素來發揮其魔力。 具體來說，它將div“條”添加到要拐角的項目，並在這些條上設置純色背景色，以便隱藏實際項目的實際角。
這意味着使用此插件只能在圖像周圍具有純色的圓形框架 。
它似乎可以在Chrome和Firefox中運行的原因是因為它們本機支持border-radius ，它確實適用於img元素。 但是，如果將轉角的類型更改為諸如bevel其他類型，則可以看到在任何瀏覽器中都不支持它： http : //jsfiddle.net/namuol/MKvHu/4/
注意下面的div工作原理，而不是img工作原理。 因此，不幸的是，如果IE7用戶需要對圖像進行四舍五入，則可能需要使用靜態四舍五入的圖像。
IE8中的圓角？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.