开发者

jQuery Function Won't Work In Chrome :/

开发者 https://www.devze.com 2023-01-16 18:56 出处:网络
Could anyone help me with this problem? Code zip is here: (link taken down) I have made everything valid but Chrome still calculates the height of the elements completely wrong (9 in every 10 times..

Could anyone help me with this problem? Code zip is here: (link taken down)

I have made everything valid but Chrome still calculates the height of the elements completely wrong (9 in every 10 times...)...


Well, technically it does.

$(document).ready(function() {
            function resizeIt() {
                var extDiv = $('#externalWrapper').height();
                var wrapper1 = $('#wrapper1').height();
                var wrapper2 = $('#wrapper2').height();
                var wrapper3 = $('#wrapper3').height();

                $('#wrapper1-mid').css({'height':extDiv - ($('#wrapper1-top').height()+$('#wrapper1-bottom').height())-4});
                $('#wrapper2').css({'marginTop':extDiv-wrapper2});
                $('#wrapper3-mid').css({'height':extDiv -($('#wrapper3-top').height()+$('#wrapper3-bottom').height())+1});

                if($('ul#related-linklist > li').size() > 15) {
                    $('#spacer').attr({'height':(wrapper2-250)});
                    $('#product-image').css({
                        'marginTop':0,
                        'marginLeft':0
                    });
                }
  开发者_开发问答          }
            resizeIt();
        });

So that's my code, in Chrome it doesn't resize the margins/heights correctly at all. But works fine in Safari..

IE/Firefox are unaffected.


Update: You are correct about, not needing to add 'px' to the end of the values. But I've updated the code below to use window.load as I think that might be the problem.

When using css you should include the px at the end. Also, you have a height attribute which should be css (this is untested):

$(window).load(function() {
        function resizeIt() {
            var extDiv = $('#externalWrapper').height();
            var wrapper1 = $('#wrapper1').height();
            var wrapper2 = $('#wrapper2').height();
            var wrapper3 = $('#wrapper3').height();

            $('#wrapper1-mid').css({'height':extDiv - ($('#wrapper1-top').height()+$('#wrapper1-bottom').height())-4 + 'px' });
            $('#wrapper2').css({'marginTop':extDiv-wrapper2 + 'px' });
            $('#wrapper3-mid').css({'height':extDiv -($('#wrapper3-top').height()+$('#wrapper3-bottom').height())+1 + 'px' });

            if($('ul#related-linklist > li').size() > 15) {
                $('#spacer').css({'height':(wrapper2-250) + 'px' });
                $('#product-image').css({
                    'marginTop':0,
                    'marginLeft':0
                });
            }
        }
        resizeIt();
    });


The HTML in your jsFiddle link is a bit of a mess, which may be the root of your problem.

You have several unclosed <img> elements, an extra <html> at the top, and several elements sharing the same id. You also have a <div> nested inside a <span>, which isn't valid.

http://infohound.net/tidy/ is a useful tool for validating & cleaning up HTML.


I've noticed that in Chrome sometimes things are positioned a bit off, and it's most likely because of the WebKit rendering engine. What I've done to counter this in the past is to just sniff Chrome and add a custom class to any affected objects ('chrome' or 'webkit' or something) and then write code specific to those objects.

This idea admittedly sucks, but it is a plausible workaround/hack if you need this working NOW.

0

精彩评论

暂无评论...
验证码 换一张
取 消