上大学做阶段项目时遇到了一个非常奇特的现象:kindEditor上传图片功能失效,可是把jsp所引用的样式去掉就好用,这说明样式有问题,于是删一个样式測试一下,就这样罪魁祸首落在了zoom身上,这是我们第一次"相识",今天周末。难得的清闲。现总结一下:
首先说一下zoom的作用:zoom用来设置对象的缩放比例。
zoom属性值:normal | <number> | <percentage>
一、normal:
代码1-1例如以下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> .test{zoom:normal;} </style> </head> <body> <h1 style="font-size:5pt;">zoom</h1> <h1>zoom</h1> <h1 class="test">zoom</h1> </body> </html>
代码1-2例如以下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> .test{zoom:normal;} </style> </head> <body> <img src="./test.png" width = "50" height = "50"></img><br> <img src="./test.png"></img><br> <img src="./test.png" class="test"></img> </body> </html>
二、<number>:用浮点数来定义缩放比例。不同意负值;
代码2-1例如以下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> .test{zoom:3;} </style> </head> <body> <h1>zoom</h1> <h1 class="test">zoom</h1> </body> </html>
代码2-2例如以下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> .test{zoom:3;} </style> </head> <body> <img src="./test.png"></img><br> <img src="./test.png" class="test"></img> </body> </html>
三、<percentage>:用百分比来定义缩放比例。
不同意负值;
代码3-1例如以下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> .test{zoom:300%;} </style> </head> <body> <h1>zoom</h1> <h1 class="test">zoom</h1> </body> </html>
图3-1
代码3-2例如以下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> .test{zoom:300%;} </style> </head> <body> <img src="./test.png"></img><br> <img src="./test.png" class="test"></img> </body> </html>
图3-2
注意:因为zoom兼容性的缺陷,事实上在实际的应用中并非非常多,仅仅需一般了解就好。
【0分下载演示资源】
原文:http://www.cnblogs.com/mengfanrong/p/5059133.html