造型聚合物 - 适用于所有浏览器

Question

如何为所有浏览器设置一次聚合物样式？ 现在我必须为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;
}