ie8下的style插值

[chengmeng1117]

r-style插值在ie8下好像不兼容
r-style={{height: logoHeight+'px'}}

第二种尝试：用style来进行插值，将样式拼接成字符串插入到style属性下
style={slogoHeight}
但是好像只能识别一个样式，比如slogoHeight="height:120px"
如果像这样添加多个样式，slogoHeight="height:120px;line-height:120px;"
效果就是一个都没有添加上...

第三种尝试：用style进行插值
slogoHeight=120px
style="height:{slogoHeight}; line-height:{slogoHeight}"
ie8下正常

想知道ie8下的样式插值，只有这一种解决方式么

[leeluolee]

是否 r-style 和 style插值表达式同时声明了？

@chengmeng1117 如果有问题那就是Bug, 理论都是可以的

[chengmeng1117]

没有同时声明，不过我好像找到问题所在原因了，在用r-style插值的时候，属性值我使用了对象的原因

slogo={
   height: '20px',
   width:'20px'
}

r-style={{height: slogo.height}}

[chengmeng1117]

又理了一下，以下几种r-style插值写法，会影响ie8的样式渲染

1.属性值有单位拼接
logoHeight = 20;
r-style={{height: logoHeight+'px'}}

2.属性值为对象的属性
slogo={height:20, width:20};
r-style={{height: slogo.height}}

3.属性值里面有计算属性
r-style={{height: slogo}}

computed:{
    slogo:function(data){
        return XXX;
    }
}

总结： 兼容ie8的写法很严格，下面这两种都可以，但有些注意点

logoHeight = '20px';

带‘-‘的属性名称要加双引号，为了格式统一，我在height上也加了“”
r-style={{"height": logoHeight, "line-height":logoHeight }}

这个就像直接写style一样就可以了，但是不要带有计算属性
style="height: {logoHeight}; line-height:{logoHeight}"

ie8的坑踩得好累，总结的不正确的地方还望指正