html - 我的网页图像在 Firefox 中显示正常，但在 Chrome 中不显示

Question

这就是我感到困惑的原因。左侧标志显示正常（在 Chrome 和 Firefox 中），但是右侧的标志很大并且不像左侧那样显示（仅在 Chrome 中）。即使代码完全相同！这让我认为问题与我缺少的东西有关。我将非常感谢任何输入，因为我仍在学习。

更新：这是查看页面的链接：
您可以向右滚动以查看另一组标志。

<!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 name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
    <!-- DISCLAIMER ALERT ONE-TIME ONLY -->
        <script type="text/javascript" src="firsttime.js"></script>              

    <!-- RED background <body bgcolor="#FF0000"> -->
    <!-- <body bgcolor="#003588"> -->
     <!-- <body bgcolor="#373737"> -->


    <title> Extra Help </title>
        <center>
            <p id="Title">
                <h1>
                    <img src="https://dl.dropbox.com/u/1914809/Senora/Senora%20bannerfans_6810928%20fancy.jpg"></img>   
                </h1>
            </center>

    <script type="text/javascript">
        document.getElementById("Title")
        </script>

</head>
<body bgcolor="#3f3f3f">
<table> 
    <tr> 
    <!-- LEFT FLAGS -->
        <td>  
        <img src="Flag_Spain.jpg" width=90%>        
        <br> 
        <img src="Flag_Spain.jpg" width=90%>        
        <br> 
        <img src="Flag_Spain.jpg" width=90%>        
        <br> 
        <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
        <br> 
        </td>
    <!-- BUTTONS -->
    <td>
        <form action="SenoraLearn.html">
            <input type="submit" value="Learn  ">
            </form>
        <form action="SenoraLearn.html">
            <input type="submit" value="Practice">
            </form>
        <form action="SenoraDiscuss.html">
            <input type="submit" value="Discuss">
            </form>
            <br>
        <form action="SenoraProblem.html">
            <input type="submit" value="Report a Problem">
            </form>
            <br>
        <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>  
    </td> 

    <!-- BEGIN GAP COLUMNS-->   
        <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> 
        <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> 
        <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> 
        <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> 
        <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> 
        <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td>  
        <!-- END GAP COLUMNS -->

    <!-- BEGIN CONTENT COLUMN-->
        <td>
            <!--YOUTUBE VIDEO -->
                <iframe width="420" height="315" src="https://www.youtube.com/embed/EkWlmL1Nnfw?rel=0" frameborder="0" allowfullscreen></iframe>
                <!-- END YOUTUBE VIDEO -->

            <!-- begin htmlcommentbox.com -->
                <div id="HCB_comment_box"><a href="http://www.htmlcommentbox.com">HTML Comment Box</a> is loading comments...</div> 
                <link rel="stylesheet" type="text/css" href="//www.htmlcommentbox.com/static/skins/bootstrap/twitter-bootstrap.css?v=0" />
                <script type="text/javascript" language="javascript" id="hcb"> /*<!--*/ if(!window.hcb_user){hcb_user={};} (function(){var s=document.createElement("script"), l=(""+window.location || hcb_user.PAGE), h="//www.htmlcommentbox.com";s.setAttribute("type","text/javascript");s.setAttribute("src", h+"/jread?page="+escape(l).replace("+","%2B")+"&opts=16862&num=10");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script>
                <!-- end htmlcommentbox.com -->
                <br> <br> <br> <br> <br> <br> 
            </td> 
        <!-- CONTENT COLUMN --> 
    <!--RIGHT SPACING COLUMN--> 
        <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> 
        <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> 
        <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> 
        <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> 
        <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> 
        <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> 
        <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> 
        <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> 
        <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td> <td> <p> </td>  

    <!-- RIGHT FLAGS -->    
        <td>  
        <img src="Flag_Spain.jpg" width='90%'>
        <br> 
        <img src="Flag_Spain.jpg" width='90%'>
        <br> 
        <img src="Flag_Spain.jpg" width='90%'>
        <br> 
        <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
        <br> 
        </td>

    </tr> 
</table>
<!--END TABLE-->

</body>
</html>

score 0 · Accepted Answer

表格格式是这里的问题。对浏览器更友好。

您应该使用类似的设置

.html

<div class="wrapper">
   <div class="column1">
      images here....
   </div>
   <div class="column2">
      content here...
   </div>
   <div class="column3">
      images here......
   </div>
</div>

.css

.wrapper {
  width: 960px
 }

.column1 {
  float: left;
  width: 33%;
}
.column2 {
  float: left;
  width: 33%;
}
.column3 {
  float: left;
  width: 33%;
}

.column1 img, .column2 img, .column3 img {
 width: 90%;
}

类似的东西

html - 我的网页图像在 Firefox 中显示正常，但在 Chrome 中不显示

1 回答 1

Related

Reference