【发布时间】：2011-07-28 04:26:26
【问题描述】：
可能很简单，但我看不到。在 IE8 中，文本围绕向右浮动的图像流动。在 IE7 中，此文本似乎被推到图像下方。尝试了边距和填充、宽度和高度的各种组合，但仍然相同。我在这里想念什么？
另外，IE 浏览器中与 css 相关的浏览器兼容性最好的网站在哪里？
非常感谢
屏幕抓取：
http://img15.imageshack.us/i/ie7paddingincorrect.png/
http://img232.imageshack.us/i/ie8paddingcorrect.png/
HTML
<div class="bodyText">
<h1>WEB DESIGN</h1>
<img src="images/satisfaction.png" alt="Guarantee" width="100px" height="100px" />
</div>
CSS
bodyText {
width: 700px;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
font-weight: normal;
padding: 10px 20px 0 20px;
line-height: 22px;
text-align:justify;
clear:left;
}
.bodyText h1 {
float:left;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
color: #666;
font-weight: normal;
clear:right;
}
.bodyText h1 img {
float:right;
clear:both;
}
*更新代码*****
HTML
<div id="containerLeft">
<div class="bodyText">
<h1>WEB DESIGN</h1>
<img src="images/satisfaction.png" alt="Guarantee" width="100" height="100" class="guarantee" />
</div>
</div>
CSS
.bodyText img.guarantee {
float:right;
margin: 0 0 10px 10px;
}
.bodyText {
width: 700px;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
font-weight: normal;
padding: 10px 20px 0 20px;
line-height: 22px;
text-align:justify;
}
/* Bodt text area with img layout */
.bodyText h1 {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
color: #666;
font-weight: normal;
}
用于调试的完整 CSS
*{margin:0;padding:0;}
body
{
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: small;
background-image: url(../images/bg.gif);
}
h1,h2,h3,h4,h5,h6,span
{
margin:0px;
padding:0px;
}
/* header section starts here */
#headertop {
width: 999px;
height:51px;
margin: 0 auto;
background-image: url(../images/headertop.gif);
background-position: center center;
background-repeat: no-repeat;
}
#headermid {
width: 999px;
height:190px;
margin: 0 auto;
background-image: url(../images/headermid.gif);
background-position: center center;
background-repeat: no-repeat;
}
#headermenu {
width: 999px;
height:51px;
margin: 0 auto;
/*background-image: url(../images/headermenu.gif);*/
background-position: center center;
background-repeat: no-repeat;
}
/* header section ends here */
/* content section ---------------------------------------- starts here */
/* holding container for content */
#container {
width: 999px;
margin: 0 auto;
background-image: url(../images/container-bg.gif);
background-position: center center;
background-repeat: repeat-y;
overflow: hidden;
}
/* container for left page content */
#containerLeft {
width: 750px;
margin: 5px 0 0 5px;
float:left;
background-image: url(../images/container-left-bg.gif);
background-position: center center;
background-repeat: repeat-y;
}
/* container for right page content */
#containerRight {
width: 230px;
margin: 5px 5px 0 0;
float:right;
background-image: url(../images/container-right-bg.gif);
background-position: center center;
background-repeat: repeat-y;
}
/* container for 3 column display */
.containerBlock {
float:left;
width: 750px;
padding: 10px 0 0 0;
clear:both;
}
#timedate {
font-family: arial;
font-size: 13px;
float:left;
padding: 18px 0 0 50px;
}
/* styling for text in the content block */
.bodyText {
width: 700px;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
font-weight: normal;
padding: 10px 20px 0 20px;
line-height: 22px;
text-align:justify;
}
/* Bodt text area with img layout */
.bodyText h1 {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
color: #666;
font-weight: normal;
}
.bodyText h2 {
float:left;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #666;
font-weight: normal;
padding: 0 0 0 0;
clear:both;
}
.bodyText h3 {
float:left;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000;
font-weight: normal;
padding: 16px 0 0 0;
clear:both;
}
.bodyTextabout {
width:220px;
float:left;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #666;
font-weight: normal;
padding: 1px 0 0 20px;
background-image: url(../images/vline.jpg);
background-position: 235px;
background-repeat: repeat-y;
}
.bodyTextabout img {
float:left;
padding:10px 0 5px 0;
}
.bodyText img.guarantee {
float:right;
margin: 0 0 10px 10px;
}
/* used for 3 column display with img */
.bodyTextContent {
width: 203px;
margin-top: 10px;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: justify;
color: #000;
font-weight: normal;
line-height: 20px;
clear:left;
}
.bodyTextContent img {
padding-top: 10px;
}
.bodyText span{
font-family: arial;
font-size: 12px;
color: #000;
font-weight: bold;
clear:left;
}
.bodyText ul{
width:500px;
float:left;
font-family: arial;
font-size: 12px;
color: #000;
font-weight: normal;
padding: 10px 0 0 60px;
list-style-image:url('../images/tick.jpg');
line-height: 34px;
clear:left;
}
.bodyTextQuote {
width: 680px;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
color: #dea508;
font-weight: normal;
padding: 16px 0 0 90px;
line-height: 20px;
background-image: url(../images/quote_bg.gif);
background-position: 45px;
background-repeat: repeat-y;
clear:left;
}
【问题讨论】：
标签： html css internet-explorer internet-explorer-7