-1
可能很簡單，但我看不到它。在IE8中，文字流向右側的圖像。在IE7中，這段文字似乎被推下了形象。已嘗試過各種邊距和填充，寬度和高度的組合，但仍然相同。我在這裏錯過了什麼？文本顯示不正確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;
}
@anish沒有變化。我已經從css調用它了？ – bollo
我同意這一點，但刪除你的明確：正確和明確：都來自CSS。 – Tank
你先清除右邊....不需要那個。 –