Question

我一直在网上搜索能够通过IE7中的盒子大小调整的解决方案（我知道，这一年是2014年，但项目（因此客户端）仍然需要这个）。我真的需要盒子大小，因为整个项目都是响应式的。

我发现了这个boxsizing.htc，几乎在任何情况下都能很好地运作。但不幸的是，这不是我的情况。因为我正在使用angularjs而且我有一个带有三列的div（带有浮动的子div），我可以单击一个按钮来更改列数。当发生这种情况时，boxsizing.htc会再次处理所有计算，每当我更改列数时，我的宽度和高度都会变小。

所以，我想，angularjs可以解决这个问题。我找到了这个pretty interesting link

我可以将代码改编成：

myApp.directive('resizable', function($window){
return {
        restrict: 'A',
        link: function(scope, element){
            scope.initializeWindowSize = function(){
                var win = angular.element($window);
                scope.windowHeight = win.innerHeight();
                scope.windowWidth = win.innerWidth();
                scope.sideHeight = scope.windowHeight - 80;

                  /* ie 7 */
                var workArea = angular.element('.workArea');
                var workWidthPadding = parseInt(workArea.css('paddingLeft')) + parseInt(workArea.css('paddingRight')) + parseInt(workArea.css('borderRightWidth')) + parseInt(workArea.css('borderLeftWidth'));
                var workHeightPadding = parseInt(workArea.css('paddingTop')) + parseInt(workArea.css('paddingBottom')) + parseInt(workArea.css('borderTopWidth')) + parseInt(workArea.css('borderBottomWidth'));

                scope.workWidth = scope.windowWidth - 228 - 210 - workWidthPadding;
                scope.workHeight = scope.sideHeight - 60 - 25 - 2 - workHeightPadding;
                console.log('height', scope.workHeight);

            };

            scope.initializeWindowSize();
            angular.element($window).bind('resize',function(){
                scope.initializeWindowSize();
                scope.$apply();

            }); 
        }
    }
});

但是那段代码并没有解决我的所有问题，只是当我可以将div的宽度或高度与窗口宽度或高度联系起来时，并非所有情况都是如此。

最后，我决定，让我们制作一个jQuery插件。我想出了这个：

$.fn.boxsizing = function(){
// if(navigator.appVersion.indexOf("MSIE 7.") != -1){

    var thisWidth = this.width(),
        thisHeight = this.height(),

        thisborderLeft = parseInt(this.css('borderLeftWidth')),
        thisborderTop = parseInt(this.css('borderTopWidth')),
        thisborderRight = parseInt(this.css('borderRightWidth')),
        thisborderBottom = parseInt(this.css('borderBottomWidth')),

        thispaddingLeft = parseInt(this.css('paddingLeft')),
        thispaddingTop = parseInt(this.css('paddingTop')),
        thispaddingRight = parseInt(this.css('paddingRight')),
        thispaddingBottom = parseInt(this.css('paddingBottom')),

        newWidth = thisWidth - thisborderLeft - thisborderRight - thispaddingLeft - thispaddingRight,
        newHeight = thisHeight - thisborderTop - thisborderBottom - thispaddingTop - thispaddingBottom;

        console.log(newWidth, newHeight);
        this.css({'width':newWidth, 'height':newHeight});
// }
}

这几乎奏效了。我无法想出如何在窗口调整大小中应用此代码。

$(window).resize(function(){
  $('div.FOO').boxresizing();
});

有人可以帮忙吗？我不知道angularjs是否可以单独处理这种东西，或者，如果我真的需要这个插件，我怎样才能在窗口中调整大小。

谢谢你，对不起我的英语很差。

box-sizing x IE7，最后一战

0 个答案: