今日提示:网站收录、自媒体推广、建站学习与休闲,请认准小金子;本平台基于反向链接实时更新,每日打卡(从您网站点入),均将自动排到首页及目录页第一名!
点此一键登录提交您的网站»  首页 > 综合目录 > 小金子学院 > 电脑知识 > 火狐浏览器不支持css缩放样式:zoom,如何完美解决?

火狐浏览器不支持css缩放样式:zoom,如何完美解决?

分享者:iweb2020  阅读量:16785
P 圆 圔祝7 囱 囫 囬
页面警告:This page uses the non standard property “zoom”. Consider using calc() in the relevant property values, or using “transform” along with “transform-origin: 0 0”.

出现此警告的原因:火狐浏览器不支持css样式:zoom;支持:但火狐支持transform:scale(1.10);transform-origin:center top; 

值得注意的是,使用transform:scale缩放后,会造成网页右边空白巨大,如何解决可参考小金子目录的文章:《如何完美解决横向滚动条之网页缩放小知识:zoom与transform:scale,如何去掉右边空白?》:https://www.xiaojinzi.com/net/no250770

关于此问题的详细分析:

zoom属性确实是ie专有属性,除了设置或者检索对象的缩放比例之外,它还具有触发ie的haslayout属性,清除浮动,清除margin重叠等作用。 但是火狐浏览器不支持zoom属性,不过在webkit内核浏览器中zoom这个属性也是可以被支持的。

显然,你这里设置的zoom:2, 即表示放大为原来的2倍,里面的字体也相应被放大了2倍。

在IE浏览器里,Zoom的使用方法是这样的: zoom : normal | numbernormal :  默认值。使用对象的实际尺寸number :  百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数,可以是数值,也可以是百分比。如:zoom:1,zoom:120%。而这个属性只有在IE中才起作用,所以很少用到它的实际用途,而最经常用到作用是清除浮动等。

其实这个属性是一个不标准的css属性,因此一般在非IE浏览器中是不推荐使用zoom来实现div 的缩放效果的,如果想要广泛引用实现放大或者缩小的效果,可以直接用css3的transform属性来替代的,即你这里可以设置为transform:scale(2)。

transform详解:

transform 的四个rotate、scale、skew和translate属性,

目前支持的浏览器 Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE9+;

兼容性写法:

transform: rotate(45deg) scale(1.5) translate(150px, 200px);
-webkit-transform: rotate(45deg) scale(1.5) translate(150px, 200px);  /* for Chrome || Safari */
-moz-transform: rotate(45deg) scale(1.5) translate(150px, 200px);    /* for Firefox */
-ms-transform: rotate(45deg) scale(1.5) translate(150px, 200px);    /* for IE */
-o-transform: rotate(45deg) scale(1.5) translate(150px, 200px);     /* for Opera */

小知识:如何判断浏览器类型?

因为ie10-ie11的版本问题,不再支持document.all判断,所以ie判断函数要重新写了

function isIE() { //ie?
   if (!!window.ActiveXObject || "ActiveXObject" in window)
    return true;
   else
    return false;
  }

第一种,只区分浏览器,不考虑版本

function myBrowser(){
  var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
  var isOpera = userAgent.indexOf("Opera") > -1;
  if (isOpera) {
    return "Opera"
  }; //判断是否Opera浏览器
  if (userAgent.indexOf("Firefox") > -1) {
    return "FF";
  } //判断是否Firefox浏览器
  if (userAgent.indexOf("Chrome") > -1){
 return "Chrome";
 }
  if (userAgent.indexOf("Safari") > -1) {
    return "Safari";
  } //判断是否Safari浏览器
  if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
    return "IE";
  }; //判断是否IE浏览器
}
//以下是调用上面的函数
var mb = myBrowser();
if ("IE" == mb) {
  alert("我是 IE");
}
if ("FF" == mb) {
  alert("我是 Firefox");
}
if ("Chrome" == mb) {
  alert("我是 Chrome");
}
if ("Opera" == mb) {
  alert("我是 Opera");
}
if ("Safari" == mb) {
  alert("我是 Safari");
}

第二种,区分浏览器,并考虑IE5.5 6 7 8

function myBrowser(){
  var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
  var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
  var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
  var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
  var isSafari = userAgent.indexOf("Safari") > -1; //判断是否Safari浏览器
  if (isIE) {
    var IE5 = IE55 = IE6 = IE7 = IE8 = false;
    var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
    reIE.test(userAgent);
    var fIEVersion = parseFloat(RegExp["$1"]);
    IE55 = fIEVersion == 5.5;
    IE6 = fIEVersion == 6.0;
    IE7 = fIEVersion == 7.0;
    IE8 = fIEVersion == 8.0;
    if (IE55) {
      return "IE55";
    }
    if (IE6) {
      return "IE6";
    }
    if (IE7) {
      return "IE7";
    }
    if (IE8) {
      return "IE8";
    }
  }//isIE end
  if (isFF) {
    return "FF";
  }
  if (isOpera) {
    return "Opera";
  }
}//myBrowser() end
//以下是调用上面的函数
if (myBrowser() == "FF") {
  alert("我是 Firefox");
}
if (myBrowser() == "Opera") {
  alert("我是 Opera");
}
if (myBrowser() == "Safari") {
  alert("我是 Safari");
}
if (myBrowser() == "IE55") {
  alert("我是 IE5.5");
}
if (myBrowser() == "IE6") {
  alert("我是 IE6");
}
if (myBrowser() == "IE7") {
  alert("我是 IE7");
}
if (myBrowser() == "IE8") {
  alert("我是 IE8");
}

T圛 圜注9困 囱 囲项

欢迎您访问小金子分类目录
特别提醒您,本资料由本站会员iweb2020提供。
如需转载,请注明出处,资料来源小金子分类目录:https://www.xiaojinzi.com/net/m1250769com.
《火狐浏览器不支持css缩放样式:zoom,如何完美解决?》感谢您的支持!

»如果您觉得'火狐浏览器不支持css缩放样式:zoom,如何完美解决?'相关资料不全,请点此协作更新!
轻轻踩一下0
赞一下,顶到首页!1
*温馨提示:顶到小金子分类目录首页及目录展示页,分享给更多网友!

网友评论区(16785人围观)

抢首评!所有评论均需人工审核后,方可显示;您的评论将给其他网友提供参考,请认真填写评论内容,感谢您的分享!
评论
1楼 本站特约评论员 [*.*.*.*] 发表于 2019年11月29日 11:52
火狐浏览器不支持css缩放样式:zoom,如何完美解决?因此一般在非IE浏览器中是不推荐使用zoom来实现div 的缩放效果的,如果想要广泛引用实现放大或者缩小的效果,可以直接用css3的transform属性来替代的,即你这里可以设置为transform:scale(2)。

  评论提示:欢迎您第一个就此网站发表评论! 欢迎您给我们留言。网络评论,也要认真哟!一言一行彰显您的素质,请文明评论!


您的姓名: * 可选项
评论内容:
剩余字数:  * 按 Ctrl + Enter 发送.
           
小金子分类目录温馨提示:本资料由本站会员自行发布,请大家自辩真伪;评论只需提交一次,请耐心等候审核通过,方可显示。
本页为您展示的是:《火狐浏览器不支持css缩放样式:zoom,如何完美解决?》。火狐浏览器不支持css缩放样式:zoom,如何完美解决?因此一般在非IE浏览器中是不推荐使用zoom来实现div 的缩放效果的,如果想要广泛引用实现放大或者缩小的效果,可以直接用css3的transform属性来替代的,即你这里可以设置为transform:scale(2)。小金子分类目录为您精心整理分享《火狐浏览器不支持css缩放样式:zoom,如何完美解决?》相关的资料,祝您使用愉快!小金子分类目录每天都有大量的优秀网站加入,您不仅可以在这里免费查询网站资料、学习各类建站知识,还可以免费发布您的网站,想提交您的网站给小金子目录收录吗?赶紧免费注册(或一键登录)提交吧!

大家在看

收录优选: