Misterioso problema con CSS e Internet Explorer 7
https://stackoverflow.com/questions/1812122
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Penso che il mito che IE sia un incubo per i web designer sia vero. IE7 mi sta aggiungendo un'imbottitura misteriosa o un margine sul lato sinistro e destro della mia immagine div # (il div grigio) e il paragrafo nel contenuto div # soffre le propietà CSS del tag h2 . Grazie in anticipo!
modifica: ho anche provato il ripristino CSS di Eric Meyer ma non ha funzionato.
edit2: Ho appena scoperto che la h1 che precede la immagine div # sta causando il problema ma non riesco ancora a capire il perché.
Internet Explorer 7 Internet Explorer 7 http://www.pixentral.com/pics/13l8JIteyHdBhVVqfFod14.jpg
Firefox 3 e Google Chrome: Firefox 3 e Google Chrome http://www.pixentral.com/pics/1ZctvuTRQLAzx9QKh6bA9Vt.jpg a>
MY HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>globo design</title>
<link href="styles/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<img id="globo" alt="globo design" src="images/globo.png">
<ul id="navigation">
<li class="current"><a href="index.html">Home</a></li>
<li><a href="index2.html">About Us</a></li>
<li><a href="index3.html">Contact Us</a></li>
</ul>
</div>
<div id="featured">
<h1>Featured Projects<h2>
<div id="images">
</div>
</div>
<div id="content">
<h2>Page 1</h2>
<p>Create a web site easily with this online HTML generator. Follow the steps below to create web pages then click "view html page" to test it once it's completed. You can copy and paste generated code where you wish within the generated document(s). For example: You created an HTML table with 3 rows and 3 columns. You then added a link, which appears below the HTML table. If you want the link inside the HTML table, just cut and paste it inside the table in place of an "ADD TEXT" statement. Any where text,images,or links need to be, there will be a generated "ADD TEXT" statement in the HTML pages.</p>
</div>
</div>
</body>
</html>
Il mio CSS:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/*typography*/
h1 {
color: #808080;
font-family: Arial;
font-size: 2em;
font-weight: normal;
margin: 20px;
}
/*structure*/
body {
background-color: #D7D7D7;
color: #5D5D5D;
font-family: Arial, "MS Trebuchet", sans-serif;
font-size: 12px;
}
#wrapper {
background-color: #FFFFFF;
width: 960px;
margin: 0 auto;
}
#header {
background-color: #555;
padding: 10px 10px 0 10px;
}
img#globo {
margin-bottom: 20px;
}
ul#navigation {
height: 2em;
list-style: none;
margin: 0;
padding: 0;
}
ul#navigation li {
background: url(../images/tab.png);
float: left;
margin: 0 2px 0 0;
padding-left: 10px;
}
ul#navigation a {
background: url(../images/tab.png) 100% 0;
display: block;
float: left;
height: 2em;
line-height: 2em;
padding-right: 20px;
text-decoration: none;
}
ul#navigation li.current {
background-color: #48f;
background-position: 0 -32px;
}
ul#navigation li.current a {
background-position: 100% -32px;
}
#featured {
}
#images {
margin-top: 10px;
background-color: #E7E7E7;
height: 200px;
}
#content {
clear: left;
padding: 10px;
}
/*typography*/
h1 {
color: #808080;
font-family: Arial;
font-size: 2em;
font-weight: normal;
margin: 20px;
}
/*structure*/
body {
background-color: #D7D7D7;
color: #5D5D5D;
font-family: Arial, "MS Trebuchet", sans-serif;
font-size: 12px;
}
#wrapper {
background-color: #FFFFFF;
width: 960px;
margin: 0 auto;
}
#header {
background-color: #555;
padding: 10px 10px 0 10px;
}
img#globo {
margin-bottom: 20px;
}
ul#navigation {
height: 2em;
list-style: none;
margin: 0;
padding: 0;
}
ul#navigation li {
background: url(../images/tab.png);
float: left;
margin: 0 2px 0 0;
padding-left: 10px;
}
ul#navigation a {
background: url(../images/tab.png) 100% 0;
display: block;
float: left;
height: 2em;
line-height: 2em;
padding-right: 20px;
text-decoration: none;
}
ul#navigation li.current {
background-color: #48f;
background-position: 0 -32px;
}
ul#navigation li.current a {
background-position: 100% -32px;
}
#featured {
}
#images {
margin-top: 10px;
background-color: #E7E7E7;
height: 200px;
}
#content {
clear: left;
padding: 10px;
}
Soluzione
dice:
<h1>Featured Projects<h2>
sei sicuro che questo sia il tuo codice? inizia con h1 e termina con h2 PS. la definizione della casella CSS in IE7 è diversa, i margini e le imbottiture contano come parte della larghezza, nei browser più recenti vengono aggiunti alla larghezza
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
