Question

在IE8中，当我在vh中给出min-height然后ie8忽略它而不工作。在其他浏览器工作中很好。我在那里读到vh不支持ie8我在ie8中使用vh的任何解决方案。

 <div class=" item Finish " id="Finish" style="overflow: visible!important;" >
        <div  style="background-color:  #27AE61!important;padding: 0px !important;min-height:85vh;overflow: visible!important;">

       <-- html code  -->                      
        </div>
 </div>

Answer 1

Silver Ringvee的答案是绝对正确的，但是当您想要执行.css()之类的操作以获得元素的正确边距时，默认的jQuery .css('margin-right')功能会被破坏。我在使用fancyBox时发现了这个问题。我通过检查props是否为字符串来修复它，如果是，则parseProps($.extend({}, props))未被使用。我还添加了一个检查，如果给出了多个参数，以支持css('margin-right', '12px')。这是我的代码：

(function ($, window) {
    var $win = $(window), _css = $.fn.css;

    function viewportToPixel(val) {
        var vwh_match = val.match(/[vwh]+/);
        var digits_match = val.match(/\d+/);
        if (vwh_match && vwh_match.length && digits_match && digits_match.length) {
            return (vwh_match[0] == 'vh' ? $win.height() : $win.width()) * (digits_match[0] / 100) + 'px';
        }
        return val;
    }

    function parseProps(props) {
        var p, prop;
        for (p in props) {
            prop = props[p];
            if (/[vwh]$/.test(prop)) {
                props[p] = viewportToPixel(prop);
            }
        }
        return props;
    }

    $.fn.css = function (props) {
        var self = this,
            originalArguments = arguments,
            update = function () {
                if (typeof props === 'string' || props instanceof String) {
                    if (originalArguments.length > 1) {
                        var argumentsObject = {};
                        argumentsObject[originalArguments[0]] = originalArguments[1];
                        return _css.call(self, parseProps($.extend({}, argumentsObject)));
                    } else {
                        return _css.call(self, props);
                    }
                } else {
                    return _css.call(self, parseProps($.extend({}, props)));
                }
            };
        $win.resize(update);
        return update();
    };
}(jQuery, window));

Answer 2

IE 9及以上版本支持vw和vh单位。

试试这个：

    (function( $, window ){

  var $win = $(window)
      , _css = $.fn.css;

  function viewportToPixel( val ) {
    var percent = val.match(/\d+/)[0] / 100,
      unit = val.match(/[vwh]+/)[0];
    return (unit == 'vh' ? $win.height() : $win.width()) * percent + 'px';
  }

  function parseProps( props ) {
    var p, prop;
    for ( p in props ) {
      prop = props[ p ];
      if ( /[vwh]$/.test( prop ) ) {
        props[ p ] = viewportToPixel( prop );
      }
    }
    return props;
  }

  $.fn.css = function( props ) {
    var self = this,
        update = function() {
          return _css.call( self, parseProps( $.extend( {}, props ) ) );
        };
    $win.resize( update );
    return update();
  };

}( jQuery, window ));

$('div').css({
  height: '50vh',
  width: '50vw',
  marginTop: '25vh',
  marginLeft: '25vw',
  fontSize: '10vw'
});

工作演示：http://jsbin.com/izosuy/1/edit?js,output

在IE8中运行良好！

阅读此主题以获取更多信息：Is there any cross-browser javascript for making vh and vw units work

min-height：100vh在ie8中不起作用

2 个答案: