返回信息流rt，需要在做网页的时候用到一个放缩的东西，简单来说是将一个div放大/缩小，想要在多浏览器(这里放的是chrome下代码)的环境下达到ie下zoom的效果，百度了一下，transform虽然很强大，但是跟我想要的结果相比还是有很大差距
简单做了个小例子大家看一下，scale(0.3);和zoom:0.3只点一个就好。。
可以用chrome调试看一下><
怎样用transform达到zoom的效果啊，因为ff不支持zoom啊啊啊！chrome用zoom缩到特别小后，字也不会再变小了啊！！！
html：
<html>
<head>
<link type="text/css" rel="stylesheet" href="menu.css"/>
<title>About Me</title>
</head>
<body>
<div class="class2">
<div class="class1">
<p>123245<br>123245<br>123245<br>123245<br>123245<br>123245<br>123245<br>123245<br>123245<br>123245<br>123245<br>123245<br>123245<br></p>
</div>
<div class="class1">
<p>67890<br>67890<br>67890<br>67890<br>67890<br>67890<br>67890<br>67890<br>67890<br>67890<br>67890<br>67890<br>67890<br>67890<br>67890<br></p>
</div>
</div>
</body>
</html>
css：
div.class1 {
height: 400px;
width: 420px;
overflow:auto;
border: 2px #6495ED;
background-color: #BCD2EE;
border-radius:5px;
text-align: center;
position:relative ;
margin-left:10px;
margin-top:10px;
float:left;
-webkit-transform: scale(0.3);
-webkit-transform-origin: 0 0;
zoom:0.3;
}
div.class2 {
height: 200px;
width: 420px;
overflow:auto;
border: 2px #6495ED;
border-radius:5px;
text-align: center;
position:relative;
margin-left:10px;
float:left;
}
div p{
text-decoration :none;
font-family: Garamond, serif;
color:red;
}
zoom的效果，浮动得很完美啊~~~
transform的效果，这……怎么让它按变化后的尺寸浮动呢……
这是一条镜像帖。来源：北邮人论坛 / www-technology / #20346同步于 2013/5/30
该镜像源已超过 30 天没有更新，可能在源站已被删除。
WWWTechnology机器人发帖
css求教：zoom和transform的问题
yolanda1989
2013/5/30镜像同步5 回复
订阅后，新回复会通过你的通知中心匿名送达。
5 条回复
我把你代码复制出去看了看，不太明白你最终想要的效果，但作为一个搞前端的，我想给你说平时真的很少用zoom这个东西，只有在解决IE6兼容时为了触发Layout才用下zoom，用它直接搞缩放真心是没用过。transform作为CSS3现在浏览器的兼容性也不能说特别好。也许你可以再描述下你想要的效果，看看有什么好办法可以实现。
【 在 lq89313 的大作中提到: 】
: 我把你代码复制出去看了看，不太明白你最终想要的效果，但作为一个搞前端的，我想给你说平时真的很少用zoom这个东西，只有在解决IE6兼容时为了触发Layout才用下zoom，用它直接搞缩放真心是没用过。transform作为CSS3现在浏览器的兼容性也不能说特别好。也许你可以再描述下你想要的效果，看看有什么好办法可以实现。
我又改了一下代码，感觉原来的class2不利于这里的表达。。。
我想要实现的效果是在放缩以后，按照放缩后大小的div块来进行浮动，而不是放缩之前的大小，就是zoom实现的效果，但是ff对zoom不支持，所以得另想办法
原始样子：
用Transform实现后的样子
用zoom实现后的样子（想要达到的样子）
html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link type="text/css" rel="stylesheet" href="menu.css"/>
<title>About Me</title>
</head>
<body>
<div>
<div class="class1">
<p>123245<br>123245<br>123245<br>123245<br>123245<br>123245<br>123245<br>123245<br>123245<br>123245<br>123245<br>123245<br>123245<br></p>
</div>
<div class="class1">
<p>67890<br>67890<br>67890<br>67890<br>67890<br>67890<br>67890<br>67890<br>67890<br>67890<br>67890<br>67890<br>67890<br>67890<br>67890<br></p>
</div>
</div>
</body>
</html>
css
div.class1 {
height: 400px;
width: 420px;
overflow:auto;
border: 2px #6495ED;
background-color: #BCD2EE;
border-radius:5px;
text-align: center;
position:relative ;
margin-left:10px;
margin-top:10px;
float:left;
-webkit-transform: scale(0.5);
-webkit-transform-origin: 0 0;
zoom:0.5;
}
div p{
text-decoration :none;
font-family: Garamond, serif;
color:red;
}
【 在 yolanda1989 的大作中提到: 】
:
: 我又改了一下代码，感觉原来的class2不利于这里的表达。。。
: 我想要实现的效果是在放缩以后，按照放缩后大小的div块来进行浮动，而不是放缩之前的大小，就是zoom实现的效果，但是ff对zoom不支持，所以得另想办法
: ...................
好吧，如果你硬要实现这个效果的话，给class1加个margin-left:-100px。应该就实现你要的效果了，还是觉得比较奇怪……
其实transform你应该能看出它的特点了，元素本身大小的占位是不会受它影响的，该占多大就多大，只是transform会把它进行变形，不管是缩放还是旋转什么的。这和浮不浮动都没关系了，你再理解理解吧~