0

我正在制作幻灯片，当页面刷新时，我遇到了调整图像大小的问题。我已经将我的代码剥离到了赤裸裸的状态，摆脱了所有的 javascript 和尽可能多的 html/css，同时仍然遇到了问题，但我根本无法弄清楚。该问题仅出现在 Safari 上。每次刷新时都不会发生这种情况，这使它更加混乱。

我已经发布了它的外观截图，以及刷新页面后的外观。如果您在我的代码中看到任何可能导致此问题的内容，请告诉我。

正确的看法 不正确的看法

代码

<!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=UTF-8" />
<title> Website </title>
<link href="slideshowRebuild.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="topDiv">
<iframe id="slideshowImg0" src="http://www.youtube.com/embed/xKBqSeYgQwo" frameborder="0" ></iframe>
</div> <!-- topDiv -->  
<div id="imageDiv">
<table id="mediaMenu">
    <tr>
        <td class="subMenu"><img style="opacity:1.0" id="sub0" src="images/tebow.jpg" alt="Tim Tebow"></img>
        </td>
        <td class="subMenu"><img id="sub1" src="images/nash.jpg" alt="Steve Nash"></img>
        </td>
        <td class="subMenu"><img id="sub2" src="images/kobe.jpg" alt="Kobe Bryant"></img>
        </td>
        <td class="subMenu"><img id="sub3" src="images/giants.jpg" alt="San Francisco Giants"></img>
        </td>
        <td class="subMenu"><img id="sub4" src="images/tbrown.jpg" alt="Terrell Brown"></img>
        </td>
    </tr>
</table>

</div>  <!-- imageDiv --> 
</body>
</html>

CSS 代码

body{
background-color:#CCC;
}
#imageDiv {
border: 5px solid black;
width:93%;
position:relative;
background-color:#E0EAFF;
margin:3%;
}
#mediaMenu, #mediaMenu table {
margin:0;
padding:0;
border-spacing:0;
position:relative;
}
#mediaMenu td {
padding:0px;
margin:0px;
width:20%;
}
#mediaMenu img {
width:100%;
height:90px;
}

#contentText {
color:orange;
float:right;
width:39%;
}
4

0 回答 0