vml border的设置

huqian2003 2011-09-03 10:12:52

设置v:image的border以后，外框并不在图片以外，而是重叠了。
这是怎么回事呢？
我的机器是Windows XP + IE7

测试图片Direction3.png和截屏如下
https://skydrive.live.com/?sc=photos&cid=4f5992b0da014c36#!/?cid=4f5992b0da014c36&sc=photos&id=4F5992B0DA014C36%21947!cid=4F5992B0DA014C36&id=4F5992B0DA014C36%21947&sc=photos

代码如下

<html xmlns:v="urn:schemas-microsoft-com:vml"> 



<head>

<title>VML IMAGE BORDER</title>

<style>

v\:* { behavior: url(#default#VML); }

</style>

</head>



<body>

	No border: <v:image src="Direction3.png" style="width:50px; height:50px; rotation:0" />

	<br><br>

	Border(3px solid #000): <v:image src="Direction3.png" style="border:3px solid #000; width:50px; height:50px; rotation:0" />

</body>



</html>

...全文

214 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

huqian2003 2011-09-04

打赏
举报

IE8和IE9也是同样的问题。

huqian2003 2011-09-03

打赏
举报

[Quote=引用 6 楼 blue_lg 的回复:]
<v:image src="http://www.baidu.com/img/baidu_jgylogo3.gif" style=" width:100px; height:50px; rotation:0" style="border:1px solid yellow;"/>
这样看起来效果好多了，可能是width的问题吧
[/Quote]

嗯，不那么明显了。
不过，放大了看，依然存在左边框的间隙问题。其实，上边框也存在同样的问题。

不知道存不存在能去除这个间隙的style

BLUE_LG 2011-09-03

打赏
举报

<v:image src="http://www.baidu.com/img/baidu_jgylogo3.gif" style=" width:100px; height:50px; rotation:0" style="border:1px solid yellow;"/>
这样看起来效果好多了，可能是width的问题吧

huqian2003 2011-09-03

打赏
举报

[Quote=引用 4 楼 calmcrime 的回复:]
是啊，这两个确实有些差异
“bai” 与左边框的间隙不同
[/Quote]

谢谢回复。
这个间隙可能属于v:image的内容。

001007009 2011-09-03

打赏
举报



<html xmlns:v="urn:schemas-microsoft-com:vml"> 



<head>

<title>VML IMAGE BORDER</title>

<style>

v\:* { behavior: url(#default#VML); }

</style>

</head>



<body>

    No border: <v:image src="http://www.baidu.com/img/baidu_jgylogo3.gif" style="width:50px; height:50px; rotation:0" />

    <br><br>

    Border(3px solid #000):

	<div style="border:3px solid #000; width:50px;">

	<v:image src="http://www.baidu.com/img/baidu_jgylogo3.gif" style=" width:50px; height:50px;  rotation:0" />

	</div>

</body>



</html>



<html"> 



<head>

<title>VML IMAGE BORDER</title>

<style>



</style>

</head>



<body>



	<img src="http://www.baidu.com/img/baidu_jgylogo3.gif" style=" width:50px; height:50px; border:3px solid #000;" />



</body>



</html>

是啊，这两个确实有些差异

“bai” 与左边框的间隙不同

BLUE_LG 2011-09-03

打赏
举报

每个v:image 外面都加个<div>标签就好了。。

huqian2003 2011-09-03

打赏
举报

[Quote=引用 1 楼 calmcrime 的回复:]
HTML code

<html xmlns:v="urn:schemas-microsoft-com:vml">

<head>
<title>VML IMAGE BORDER</title>
<style>
v\:* { behavior: url(#default#VML); }
</style>
</head>

<body>
No border: <v:……
[/Quote]

这个是在外框上。但是，这个外框也并不是正好近贴着图片的。
比如左边框的黑线和"Bai”之间有界限，而右边框和"百度"确是紧贴着的。

这个问题，我怀疑有可能是IE没有很好描画vml image对象。
请高手赐教。

001007009 2011-09-03

打赏
举报



<html xmlns:v="urn:schemas-microsoft-com:vml"> 



<head>

<title>VML IMAGE BORDER</title>

<style>

v\:* { behavior: url(#default#VML); }

</style>

</head>



<body>

    No border: <v:image src="http://www.baidu.com/img/baidu_jgylogo3.gif" style="width:50px; height:50px; rotation:0" />

    <br><br>

    Border(3px solid #000):

	<div style="border:3px solid #000; width:50px;">

	<v:image src="http://www.baidu.com/img/baidu_jgylogo3.gif" style=" width:50px; height:50px;  rotation:0" />

	</div>

</body>



</html>