jQuery Function Won't Work In Chrome :/
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.
加载中,请稍侯......
精彩评论