我是一名开源开发人员,使用我的webframework(http://mmm.sf.net)进行纯HTML5和CSS3 .我想通过输入绘制验证错误图标:CSS中的无效规则与右边对齐.但它只适用于FF,但不适用于基于webkit的浏览器,如Chrome或Safari.我为测试创建了一个最小的standanlone html(没有验证和:无效):
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
<!--
input {
border-color: #ff2222;
background-color: #ff8888;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em'><g><circle cx ='8' cy ='8' r ='8' style='fill:%23ff0000;stroke:none'/><text x='6' y='13' style='font-size:14px;fill:%23ffffff;stroke:none;font-family:Monospaced;font-weight:bold'>!</text></g></svg>");
background-repeat: no-repeat;
/* background-size: auto; */
background-position: 98% 50%;
}
-->
</style>
</head>
<body>
<input type="text" placeholder="type here" />
</body>
</html>
有任何想法吗？