Question

我正在制作幻灯片，当页面刷新时，我遇到了调整图片大小的问题。我已经将我的代码剥离到裸露的，尽可能地摆脱了所有的javascript和html / css，但仍然无法解决问题，而我根本无法理解。这个问题只出现在Safari上。每次刷新都不会发生这种情况，这使得它更加令人困惑。

我发布了一个截图，说明它应该是什么样子，然后是我刷新页面后的样子。如果您在我的代码中看到可能导致此问题的任何内容，请告诉我们。

Correct View Incorrect View

HTML CODE

<!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%;
}

页面刷新时调整HTML图像大小

0 个答案: