pre tag annoyance

Customizing a website can be a very annoying work, mainly because different browsers implement features of HTML and CSS differently. For example, here is a test with a code box implemented with the pre tag. Some of these examples render differently in Firefox 2, IE 6 and Opera 8.54; interestingly, Opera is the only one to show everything correctly. IE behaves the worse (and since IE 6 is still the most popular browser on the Internet, this is alarming). 1 line, short:

grk grk

1 line, long: For some reason, Firefox does not show a scroll bar. IE 6 shows a scrollbar that hides the text itself !!

grk grk >>> grk grk >>> grk grk >>> grk grk >>> abcdefghijklmnopqrstuvwxyz

2 lines, short:

grk grk
earth to mars

2 lines, long: IE 6 shows only one line of text with small vertical arrows to scroll.

grk grk grk grk grk grk grk grk grk grk be vewy vewy quiet I am hunting wabbit
earth to mars 

several lines, short:

abc 123
grk grk

x-men, unite
your petty lives

this isn't possible

generalize this code ?

for (i = 0; i < N; ++i)
    do something with element i

several lines, long: For some reason IE decides to limit the height of the box and provide a vertical scrollbar.

abc 123
grk grk

x-men, unite
your petty lives for the proletariat, comrades!

this line is going to be the long, evil, line that will ruin it all. don't you have any consideration, citizen line?

generalize this code ?

for (i = 0; i < N; ++i)
    do something with element i

but oh, we can!

container.each {|elem| do something with elem}