I wrote a menu where the total width of the buttons should be always the same width of the menu bar. So i take the whitespace and devide it over the buttons.
It works on: Windows: FF IE6 IE7 IE8 Mac: Safari Chrome
But it doesnt wor开发者_StackOverflow中文版k on Firefox on the Mac can does anyone have an idea?
The example can be found: http://www.bobkarreman.com/menu_prototype/menu/menu.html
EDIT:
The steps i take are:
- I Calculate the whitespace.
- Divide that by the number of buttons and round it.
- Add that together with the current padding to the button.
- To be sure there are no rounding issues Each time a add the padding to a button i subtract it from the totalWhitespace and on the last LI i add the totalWhitespace.
So it can be that the last LI gets 1 or 2 pixels less or more.
Well since you're changing the li's widths dynamically their width values are floats rather than integers. It looks to me like the browsers all handle that differently. Try doing the Math.floor
function after it's calculated.
Looking at your console
output, it looks like it is not necessarily applying the calculated padding as expected. It seems to be calculating marLeft
to 38
(and last
to 43
) but applying 43
to every <a>
. I could be off, I'm only guessing at the meaning of your console
output.
It's worth noting also that it's off by a pixel for me in Safari (the last menu's <a>
has padding-left: 39px
whereas the others have padding-left: 40px
, and it is one pixel from the edge of the container).
Edit: I may be misunderstanding your console
output, Safari is saying marLeft
is 35
but applying 40
(except for last
).
Edit 2: I really appreciate there being information in the console to look at. This is the right way to post an example. Thanks!
精彩评论