html - Styling polymer - 一次适用于所有浏览器

Question

如何为所有浏览器设计一次 polymer 样式？ 现在我必须为 Chrome/Opera 和 Firefox 编写两个 css 版本:

.leftSide img{
    float: left;
    width: 100px;
}
content[select=".poster"]::content img {
    float: left;
    width: 100px;
}

HTML:

        <div class="leftSide">
                <content select=".poster"></content>
        </div>

这仅适用于新的 Opera 和 Chrome:

content[select=".poster"]::content img

这只适用于 firefox:

.leftSide img{
    float: left;
    width: 100px;
}

那么，有没有一次性编写代码的选项？

Answer 1

你试过polyfill-next-selector了吗？ Documentation for it here

有了它你应该能够做到:

polyfill-next-selector {content: ':host .leftSide img';}
content[select=".poster"]::content img {
    float: left;
    width: 100px;
}