CSS3"转换"属性在IE9中的工作方式不同
Ziv*_*evy 5 html css svg internet-explorer-9
我正在尝试使用SVG,CSS3 transform和不同的浏览器.
这是我的HTML代码:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
<style type="text/css">
.svg-holder {
text-align: center;
padding: 50px;
}
.img1 {
transform: rotate(180deg); /* IE10 and Mozilla */
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome and Safari */
}
.img2 {
transform: scale(3,3); /* IE10 and Mozilla */
-ms-transform: scale(3,3); /* IE 9 */
-webkit-transform: scale(3,3); /* Chrome and Safari */
}
.bg {
background-color: yellow;
background-image: url(arrow.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 100px;
height: 100px;
margin: 0 auto;
transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg);
}
</style>
</head>
<body>
<div class="svg-holder img1">
<img src="arrow.svg" class="red-arrow">
</div>
<div class="svg-holder img2">
<img src="arrow.svg">
</div>
<div class="svg-holder bg">
</div>
</body>
</html>
"arrow.svg"文件内容是(但你可以使用你想要的.svg):
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="35.551px" height="35.551px" viewBox="0 0 35.551 35.551" enable-background="new 0 0 35.551 35.551" xml:space="preserve">
<polygon fill="#404040" points="17.775,0 0,17.775 11.109,17.775 11.109,35.551 24.441,35.551 24.441,17.775 35.551,17.775 "/>
</svg>
但是,上面代码的呈现方式在IE9和其他(普通)浏览器之间是不同的.注意班级中突出显示的箭头(默认情况下箭头指向UP).bg
以下是Chrome的屏幕截图,箭头旋转90度并指向RIGHT(渲染此代码的正确方法):
这是IE9的截图,箭头旋转180度,点向下:
有人可以解释一下吗？
编辑:
我最近发现了一个名为 CSS Sandpaper 的 hack，它与这个问题相关，并且可能会让事情变得更容易。
该 hack 实现了对旧版本 IE 的标准 CSS 转换的支持。现在您可以将以下内容添加到 CSS 中：
-sand-transform: rotate(10deg);
否则，您也可以尝试使用以下代码来执行您需要的操作：
-ms-transform: matrix(0.000,1,-1,0.000,0,0);
IE 9 在使用 deg 时有时会出现这些问题