浏览器对width与height的最大值限制

在IE8与opera10-中，数字一旦大于1342177.27,都将自动被变成1342177.27这个数，其他见下面的注释部分。

    var zooms = [
      ["256px","256px"] ,
      ["512px","512px"] ,
      ["1024px","1024px"] ,
      ["2048px","2048px"] ,
      ["4096px","4096px"] ,
      ["8192px","8192px"] ,
      ["16384px","16384px"] ,
      ["32768px","32768px"] ,
      ["65536px","65536px"] ,
      ["131072px","131072px"] ,
      ["262144px","262144px"] ,
      ["524288px","524288px"] ,
      ["1048576px","1048576px"] ,
      ["2097152px","2097152px"] ,
      ["4194304px","4194304px"] ,
      ["8388608px","8388608px"] ,
      ["16777216px","16777216px"] ,
      ["33554432px","33554432px"] ,//firefox3.6.12渲染错误，变成长方形
      ["67108864px","67108864px"] ,
      ["134217728px","134217728px"] ];//safari5.0.3, chrome10.0.6, opera10.62显示不能，失去背景色

    function setZoom(el,zoom) {
      var width =  zoom[0], height = zoom[1];
      el.style.width = width;
      el.style.height = height;
      el.innerHTML= "设置值为 "+ width + " x " + height
        +"
实际值为 "+ el.style.width + " x " + el.style.height;
    };

    function test(el){
      var zoom = zooms.shift();
      setZoom(el,zoom);
      if(zooms.length){
        setTimeout(function(){
          test(el)
        },2000);
      }
    }
    window.onload = function(){
      var el = document.getElementById("test");
      test(el);
    }

<!DOCTYPE HTML>
<html>
  <head>
    <title>浏览器对width与height的最大值限制 by 司徒正美</title>
    <meta charset="utf-8" />
    <style>
      #test {
        background: #cba;
      }
    </style>
    <script>
      var zooms = [
        ["256px","256px"] ,
        ["512px","512px"] ,
        ["1024px","1024px"] ,
        ["2048px","2048px"] ,
        ["4096px","4096px"] ,
        ["8192px","8192px"] ,
        ["16384px","16384px"] ,
        ["32768px","32768px"] ,
        ["65536px","65536px"] ,
        ["131072px","131072px"] ,
        ["262144px","262144px"] ,
        ["524288px","524288px"] ,
        ["1048576px","1048576px"] ,
        ["2097152px","2097152px"] ,
        ["4194304px","4194304px"] ,
        ["8388608px","8388608px"] ,
        ["16777216px","16777216px"] ,
        ["33554432px","33554432px"] ,//firefox3.6显示不能
        ["67108864px","67108864px"] ,
        ["134217728px","134217728px"] ];//chrome显示不能

function setZoom(el,zoom) {
        var width =  zoom[0], height = zoom[1];
        el.style.width = width;
        el.style.height = height;
        el.innerHTML= "设置值为 "+ width + " x " + height
          +"<br/>实际值为 "+ el.style.width + " x " + el.style.height;
      };

</body>
</html>

posted on 2011-02-16 15:33 司徒正美阅读(3666) 评论(5) 编辑收藏举报

刷新页面返回顶部

Ruby's Louvre

导航

公告

浏览器对width与height的最大值限制