Question

我得到了一段HTML

<img style="cursor: pointer; width: auto; height: auto; display: inline;" src="http://www.kidsgen.com/fables_and_fairytales/images/rapunzel.gif" alt="rapunzel" title="rapunzel" align="right">

即使我在其样式中设置display: inline;，当我试图获得这样的css显示属性时：

alert($('img:first').css('display'))

或

var el=document.getElementsByTagName('img')[0]
alert(document.defaultView.getComputedStyle(el,null)['display'])

它总是给我价值block。

出了什么问题？

Answer 1

align='right'属性赋值导致img元素的display属性设置为'block'。没有align='right'属性的代码会提醒“内联”on jsFiddle.

<body>
    <img style="cursor: pointer; width: auto; height: auto; display: inline;" src="http://www.kidsgen.com/fables_and_fairytales/images/rapunzel.gif" alt="rapunzel" title="rapunzel" />
</body>

alert($('img:first').css('display')); // alerts 'inline'

相关的额外信息是img标签实际上inline elements by default.但是，在img标记内设置了align='right'，即使插入此行，我也无法将显示属性设置回内联代码：

$('img:first').css('display', 'inline');

Answer 2

因为你在图片标签中有align="right";

该CSS规则用于对齐块元素（Learn more）。

如何获得图像真正的css显示属性

2 个答案: