I am not able to figure out why this does happen.
On all non-webkit browsers I tested the code below with (IE8, FFx 3.x, Opera 10.x) there is no scrollbar on the <pre> area. For both Chrome and Safari vertical scrollbar appears.
Of course I do not want it to appear.
The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB" lang="en-GB" dir="ltr">
<head>
<style type="text/css" media="screen,projection">
body {
color: black;
font-family: Verdana, sans-serif;
font-size: 90%;
}
#container {
font-size: 9pt;
}
#container-content {
color: black;
line-height: 1.5em;
}
pre {
background-color: #F9F9F9;
border: 1px dashed #2F6FAB;
color: black;
font-family: 'Courier New', monospace;
font-size: 1em;
line-height: 1.1em;
overflow: auto;
padding: 15px 20px;
width: 150px;
}
</style>
</head>
<body>
<div id="container">
<div id="container-content">
<pre>line 1
line 2
and this is a very long like it is, and this is a very long like it is
line 4</pre>
</div>
</div>
</body>
</html>
Note that this is a code snippet from a large project. All unrelated code is stripped out.
Removing line-height or making it >= 1.3em solves the problem but I want it to be 1.1em.