temas de relleno IE8 v IE7
https://stackoverflow.com/questions/3557724
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
He leído un montón de las entradas anteriores que tratan del problema de relleno que estoy experimentando entre IE8 y versiones anteriores (IE7,6). Ya he intentado restablecer mi CSS como se mencionó anteriormente, pero sin suerte. Cualquier ayuda sería muy apreciada. Gracias de antemano!
El problema se ilustra mejor con capturas de pantalla (ver abajo), pero en el css he adjunto, estoy bastante seguro de los problemas reside en algún lugar del relleno en header_left y header_center, que no se refleja adecuadamente en IE6 / 7 . Mi totalmente anchuras del sitio siempre suman 980 px, así que mi matemáticas está bien ...
IE6 o 7 (Problemas)
IE8 (sin problemas)
Aquí está mi código HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Application Form</title>
<link href="xyx.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#999999">
<div class="wrapper">
<div class="header_separator"></div>
<div class="header_left"></div>
<div class="header_center">
<h2> Lorem ipsum dolor sit amet</h2>
<h2> consectetur adipiscing elit </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a nulla at nunc iaculis pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse pellentesque dui quis urna volutpat a posuere nibh imperdiet.</p>
</div>
<div class="header_right"></div>
<div class="header_separator">
<hr align="center" color="#00B050" size="5">
</div>
<div class="body_left">
<h3> Lorem ipsum dolor:</h3>
<ul class=noBulletIndent>
<li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a nulla at nunc iaculis pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse pellentesque dui quis urna volutpat a posuere nibh imperdiet. Donec eu tellus eu augue pellentesque venenatis ac v</li>
</ul>
</div>
<div class="body_right">
<form action="insert.php" method="post">
<table width="630" border="0" cellspacing="0" cellpadding="0">
<tr height=40 valign="top">
<td width="200"><p><strong>Company Name:</strong></p></td>
<td width="430"><input name="companyname" type="text" id="companyname" size="40" /></td>
</tr>
<tr height=40 valign="top">
<td width="200"><p><strong>Company Website:</strong></p></td>
<td width="430"><input name="website" type="text" id="website" size="40" /></td>
</tr>
<tr height=125 valign="top">
<td width="200"><p><strong>Company Description:</strong></p></td>
<td width="430"><textarea name="description" id="description" rows="6" cols="40"></textarea></td>
</tr>
<tr height=40 valign="top">
<td width="200"><p><strong>Primary Contact Person:</strong></p></td>
<td width="430"><input name="contactperson" type="text" id="contactperson" size="40" /></td>
</tr>
<tr height=40 valign="top">
<td width="200"><p><strong>Contact Person Email:</strong></p></td>
<td width="430"><input name="contactemail" type="text" id="contactemail" size="40" /></td>
</tr>
<tr height=40 valign="top">
<td width="200"><p><strong>Contact Person Phone:</strong></p></td>
<td width="430"><input name="contactphone" type="text" id="contactphone" size="40" /></td>
</tr>
<tr>
</table>
<table width="630" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="300">
<?php
require_once('recaptchalib.php');
$publickey = "xyz";
echo recaptcha_get_html($publickey);
?>
</td>
<td width="330" align="left" valign="bottom">
<input type="image" name="submit_acre" id="submit_acre" src="images/acre_submit.png" />
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
Aquí está mi xyz.css:
@charset "utf-8";
/* CSS Document */
.mainbody{
margin-left: auto;
margin-right: auto;
width:980px;
word-spacing: normal;
}
.wrapper {
height: 100%;
width: 980px;
margin-right: auto;
margin-left: auto;
}
.header_separator {
background-color: #FFF;
height: 10px;
width: 980px;
float: left;
vertical-align: middle;
}
.header_left {
background-color:#FFF;
height:122px;
width:110px;
float: left;
vertical-align: middle;
padding-left: 10px;
}
.header_center {
background-color: #FFF;
height: 122px;
width: 630px;
float: left;
font-family: arial;
vertical-align: top;
text-align: left;
padding-left: 10px;
padding-right: 10px;
}
.header_right {
background-color: #FFF;
height: 122px;
width: 210px;
float: left;
vertical-align: middle;
}
.body_left{
background-color:#FFF;
height:490px;
width:300px;
float:left;
font-family: arial;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
}
.body_right{
background-color:#FFF;
height:490px;
width:650px;
float:left;
padding-top: 10px;
padding-left: 10px;
}
.noBulletIndent {
padding: 0px;
margin-left: 12px;
margin-top: 0px;
}
p {
margin: 0px;
padding: 0px;
font-family: Arial;
font-size: 14px;
}
h2 {
margin: 0px;
padding: 0px;
font-family: arial;
}
h3 {
margin: 0px;
padding: 0px;
font-family: arial;
font-size: 15px;
}
li {
margin: 0px;
padding: 0px;
font-size: 14px;
margin-left: 4px;
}
Solución
¿Es realmente el código HTML completa? Si es así, usted está en el modo de caprichos sin un tipo de documento. También hay que tener en cuenta que IE6 no funciona como Internet Explorer 7 que no funciona como IE8, que no va a funcionar como IE9. (Buena suerte para todos nosotros!)
Otros consejos
En primer lugar, sin una tipo de documento está ejecutando en modo de peculiaridades.
En segundo lugar, no estoy muy seguro de lo que su problema es que ... es el relleno por encima y por debajo de la de recursos humanos que se está rompiendo la barra gris correcto? Si es así, que se puede fijar con un restablecimiento rápido de los recursos humanos.
hr {
padding:0px;
margin:0px;
}
Me pondría overflow-x:hidden; sobre el elemento que se tropieza con la barra lateral a la derecha, como el div contenido o lo que sea para asegurarse de que no supera píxeles whatevermany ha asignado, ya que IE6 / IE7 permitir que un elemento exceda el anchura.
A jsFiddle ayudaría a ver visualmente el problema así, si es que no lo hace.
