html - Web ページの画像が 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 - Web ページの画像が Firefox では正常に表示されるが、Chrome では表示されない

1 に答える 1

Related

Reference