pues es curioso y la verdad no tengo la explicación. estuve haciendo varias pruebas y pude encontrar cuando es que sucede dicho efecto. sucede cuando tienes dos elementos tipo lineal, uno dentro del otro. si el elemento padre tiene aplicado un borde que no incluya left y right, entonces se aprecia el defecto. a continuacion un ejemplo usando <strong> y <span>. sin embargo, el tercer <div> es curioso. el defecto desaparece cuando tienes un elemento lineal hermano con los mismo estilos. en fin, me parece que se trata de algun bug de chrome.
Código:
<!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'><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test Development</title>
<script type='text/javascript'>
</script>
<style type='text/css'>
div{
border:thin solid #ccc;
border-width:thin 0;
padding:1em 0;
margin:2em;
font-size:2em;
}
strong{
border-bottom:1em solid #3c3;
border-top:1em solid #3c3;
}
em{
border-bottom:1em solid #3c3;
}
</style>
</head>
<body>
<div><strong><span>defect</span></strong></div>
<div><strong>good</strong></div>
<div><strong><span>something</span></strong> <em>curious</em></div>
</body></html>