外部CSS高度不起作用

我正嘗試使用外部樣式頁面對頁面進行樣式設置。我的一些div選擇了所有的樣式，有些則沒有。特別是，其中包含圖像文件的所有樣式都採用除高度和/或寬度之外的所有樣式。 z位置，左側，頂部等都工作正常。我檢查了DOM瀏覽器，並沒有顯示它從body標籤繼承它的大小，但我無法弄清楚爲什麼它不會正確調整大小。外部CSS高度不起作用

HTML：

<!DOCTYPE html> 
    <html lang = "en"> 
    <head> 
     <meta charset = "utf-8" /> 
     <link rel="stylesheet" type="text/css" href="race_inprogress.css"> 
     <script type='text/JavaScript' src="race.js" language=javascript></script> 
    </head> 

    <body> 

     <h1 class = "amazing"> The Amazing Race For an A! </h1> 

     <h1 class = "fordmeis"> Professor Ford Vs Michael Meis </h1> 

     <div id="traffic-light"> 
     <div id="stopLight" class="bulb"></div> 
     <div id="slowLight" class="bulb"></div> 
     <div id="goLight" class="bulb"></div> 
     </div> 

     <input type=button onClick="illuminateGreen();timer();" value='Go!' style="position: absolute; left: 545px; top:265px;"> 

     <div class = "racer1"> 
      <img src=images/teacher.jpg id='i1'> 
     </div> 
      <br><br><br><br> 
     <div class = "racer2"> 
      <img src=images/meis.png id='i2'> 
     </div> 

     <div class = "road1"> 
      <img src=images/road.jpg> 
     </div> 

     <div class = "road2"> 
      <img src=images/road.jpg> 
     </div> 

     <div class = "winners"> 
      <img src=images/winner_ford.png id='image1' onclick="reset()"> 
      <br><br><br><br> 
      <img src=images/winner_meis.png id='image2' onclick="reset()"> 
     </div> 

     <script> 
      illuminateRed() 
      hideImage() 
     </script> 

    <div class="vertical-line"> 
    </div> 

    </body> 
</html>

CSS：

html 
{ 
    height: 100%; 
    width: 100%; 
} 

body 
{ 
font-family: sans-serif; 
background: url("images/checkback.png"); 
background-repeat: no-repeat; 
background-size: cover; 
width: 100%; 
height: 100%; 
margin: 0px; 
padding: 0px; 
overflow-x: hidden; 
} 

div.racer1 
{ 
    width: 10px; 
    position:absolute; 
    left: 25px; 
    top: 325px; 
    z-index: 2; 
} 

div.racer2 
{ 
    width: 10px; 
    position:absolute; 
    left: 25px; 
    top: 500px; 
    z-index:2; 
} 

div.road1 
{ 
    position:absolute; 
    left: 30px; 
    top: 325px; 
    z-index: 1; 
    height: 133px; 
    width: 1180px: 
} 

div.road2 
{ 
    position: absolute; 
    left: 30px; 
    top: 500px; 
    z-index: 1; 
    height: 133px; 
    width: 1180px; 
} 

div.winners 
{ 
    position:absolute; 
    left: 5px; 
    top: 0px; 
    z-index: 3; 
    width: 100%; 
    height: 100%; 
} 

h1.amazing 
{ 
    font-size: 30px; 
    position: relative; 
    top: 150px; 
    left: 20px; 
    color: gold; 
} 

h1.fordmeis 
{ 
    font-size: 30px; 
    position: relative; 
    top: 90px; 
    left: 700px; 
    color: gold; 
} 

#traffic-light 
{ 
height: 200px; 
width: 100px; 
left: 500px; 
position: absolute; 
background-color: #333; 
border-radius: 40px; 
margin: -100px 0; 
padding: 20px; 
} 

.bulb 
{ 
height: 50px; 
width: 50px; 
background-color: #111; 
border-radius: 50%; 
margin: 15px auto; 
transition: background 500ms; 
} 

div.vertical-line 
{ 
width: 0px; 
height: 315px; 
top: 55px; 
position:relative; 
left: 1200px; 
color: gold; 
border: 10px inset; 
z-index: 1; 
}

來源

2016-05-02 Michael Meis

您需要定義的img標籤圖像的高度和寬度內聯。 <img src="path/to/image" height="42" width="42">

來源

2016-05-02 04:53:01

它使用內聯標籤很好，但這是針對學校項目和在課程開始時指定的使用外部樣式表的指導員 –

試試這一個 .racer1 img {height：100％; 寬度：100％; } –

標籤上的啊，width =「」不是CSS，而是實際的HTML標籤屬性。如果您在技術上進入頁面渲染和繪畫，建議圖像至少有一個寬度設置，以便沒有多個計算。添加類似style =「width：100px」的屬性將被視爲內聯樣式。 –

很難說完全沒有圖像供參考。一個工作示例將有助於確認（看起來也有外部JS）。其中一個主要的罪魁禍首是：圖像大於容器內的容器？如果是這樣，並且您沒有設置圖像的最大寬度爲100％，那麼它們將會突破設置的佈局寬度/高度。如果您想要剪切圖像，則在overflow：hidden中添加將保留這些確切的寬度，而不會顯示所有圖像。

來源

2016-05-02 04:54:00

我不確定我完全遵循你所說的話。還有js，我不認爲它是相關的，所以我沒有包括它。只要我使用內聯標籤，完全相同的樣式就可以正常工作，但當我將其移動到外部樣式表時，它只會停止工作。這些圖片都比我展示的圖片大，但我認爲寬度和高度標籤會縮小它們，這是不準確的嗎？ –

如果你想看到完整的代碼工作，我可以在谷歌驅動器上與你分享，我試圖讓小提琴工作，但無法弄清楚。我不擅長這個東西。 –

您發佈的示例沒有設置內聯高度或寬度的圖像。如果您沒有設置內嵌寬度（例如），可能是因爲您提到圖像確實較大而導致的罪魁禍首。向樣式添加img {max-width：100％}是否可以解決問題？如果你確定JS沒有影響，那麼可能不用擔心。 –

外部CSS高度不起作用

回答

相關問題