浮動div的CSS跨瀏覽器問題

我在Firefox中創建了幾個頁面，並且所有內容都按照它的樣子查看。快速瀏覽Chrome和Safari，並注意到我在此頁面標題中的選擇加入表單沒有顯示，因爲它應該。我希望整個選擇在div div標題內。從我可以告訴它在Firefox的標題div中，但幾乎所有其他瀏覽器顯示在主導航下。浮動div的CSS跨瀏覽器問題

下面是頭和選擇的形式的CSS應該是在它：

.header{height: 302px;min-width: 100%; background-color: #265f8b; 
    margin: 0 auto;} 

.opt-in {height: 280px; width: 800px;background-color: #c7e877;float: right; 
    margin-right: 200px;margin-top: 10px;border:5px solid #8db530; 
    border-radius: 10px;position: relative;}

下面是HTML：

<div class='header'> 
<img style='border: 1px solid black;' src='images/main-logo.jpg'></img> 
<div class='opt-in'> 


    <p>Enter your name and email below to get 
     <span style='font-weight: bolder;'>Free Instant Access</span> to the most comprehensive 
     guide available on how to ..</p> 

     <p><span style='font-weight: bolder;'>Over 10,000 people</span> have enjoyed my eBook and receive 
      a weekly newsletter with exclusive tips!</p> 

     <table> 
      <form method='post' action='opt-in-form.php'> 
      <tr><td><input type='text' name='name' value='Enter Name...' /></td></tr> 
      <tr><td><input type='text' name='email' value='Enter Your Email...' /></td></tr> 
     <input class='opt-in-button' type='image' src='images/opt-in-button.png' alt='Submit Form' /> 
     </table>  

     </form> 


    <img class='book-cover' src="images/book-cover-new.png"></img> 

</div> 

</div>

你會發現，我已經包括它在頭部div中，並在其上有一個浮點。

http://fairchildwebsolutions.com/packattack/index.php

來源

2013-10-03 stephenthedev

請在此處添加有意義的代碼和問題描述。請不要將鏈接到需要修復的網站 - 否則，一旦問題得到解決，此問題將會丟失未來訪問者的任何價值。發佈 [簡短，獨立，正確的示例（SSCCE）]（http://www.sscce.org/），這表明您的問題將幫助您獲得更好的答案。有關更多信息，請參閱 [我的網站上的某些內容不起作用。我可以只粘貼一個鏈接到它嗎？]（http://meta.stackexchange.com/questions/125997/）謝謝！ –

左上角的標誌需要一個float: left。那應該解決問題。

來源

2013-10-03 14:33:04

將徽標浮在左邊。

float:left

也指定img元素的寬度。 width:auto也會做。

來源

2013-10-03 14:34:45

這正是我所說的 –

是啊你的答案出現後，我發佈。偉大的思想和所有這一切。 –

@BeniaminSzabo這是一個簡單的答案，這是一個令人難以置信的簡單問題。這不像他偷了你的任何東西，這是一個明顯的和初級的CSS修復。 – Ennui

浮動div的CSS跨瀏覽器問題

回答

相關問題