Javascript 盒子尺寸x IE7，最后一场战斗

我一直在网上寻找一种解决方案，可以在IE7中实现盒子尺寸的可变化（我知道，今年是2014年，但项目（因此客户）仍然要求这样做）。我真的需要框大小，因为整个项目是响应

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

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

我可以将该代码改编为：

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是否可以单独处理这类事情，或者，如果我真的需要这个插件，我该如何在窗口中调整大小

---

谢谢你，很抱歉我的英语不好。

你可以看看这个：这里列出了几种盒子大小的塑料填充物：你试过了吗？我也试过，但没用。该死的Ie7:/Spudley，我试过基督教的“Schepp”Schaefer版本。我试试另一个。