IE 在附加 html 字符串时从维度中删除“%”答案

【问题标题】：IE dropping "%" from dimensions when appending html stringIE 在附加 html 字符串时从维度中删除“%”
【发布时间】：2012-03-18 04:59:32
【问题描述】：

我正在尝试将视频元素创建为字符串，从变量（也是字符串）设置高度和宽度，我发现 IE9 正在从维度值中删除“%”。这是一个简化的示例：

html:

<div id="videoWrap">
</div>

javascript：

var height = '100%',
    width = '100%',
    video = '<video id="someId" width="' + width + '" height="' + height + '">' +
            '<source src="http://someSource.com" /></video>';

$('#videoWrap').append(video);

导致 Chrome（或任何其他合理的浏览器）：

<div id="videoWrap">
    <video id="someId" width="100%" height="100%">
        <source src="http://someSource.com" />
    </video>
</div>

在 IE 中的结果：

<div id="videoWrap">
    <video id="someId" width="100" height="100">
        <source src="http://someSource.com" />
    </video>
</div>

有人有什么想法吗？

【问题讨论】：

标签： javascript internet-explorer height width

【解决方案1】：

width 和 height 不是您应该为元素设置样式的大小。这两个属性应该只以像素表示大小。

相反，使用style="width: 100%; height: 100%;" 正确执行此操作。

【讨论】：

【解决方案2】：

那是因为 IE 在这种情况下对标准更严格。

根据the HTML specification，尺寸必须指定为整数值作为像素。使用百分比无效。

【讨论】：

也就是说，IE在这种情况下是“合理的浏览器”。

【解决方案3】：

我可以建议您执行以下操作：

var vdo = $('<video/>').css({'width':'100%','height':'100%'});

然后添加你的休息...

【讨论】：