2017-05-15 81 views
1
<div class="searchbox"> 
    <form> 
     <input type="text" name="src-txt" class="src-txt"/> 
     <input type="submit" value="" name="src-btn" class="src-btn"/> 
    </form> 
</div> 


.searchbox { 
    float: left; 
    width: 35%; 
    height: 30px; 
    margin-top: 25px; 
    margin-left: 3%; 
    border: 1px solid red; 
} 

.src-txt { 
    float: left; 
    width: 80%; 
    height: 100%; 
    border: 2px solid #3682c4; 
    border-top-left-radius: 5px; 
    border-bottom-left-radius: 5px; 
    padding: 5px; 
} 

.src-btn { 
    float: left; 
    width: 15%; 
    height: 100%; 
    background-color: #3682c4; 
    background-image: url("../content/src_img.png"); 
    background-repeat: no-repeat; 
    background-position: center; 
    border: none; 
    cursor: pointer; 
    border-top-right-radius: 5px; 
    border-bottom-right-radius: 5px; 
} 

這是代碼它工作正常,但添加後!DOCTYPE html在搜索按鈕的高度減少了。我添加了Doctype標籤並更改了按鈕的高度

我不明白是什麼改變了。

是什麼原因?

我應該更改我的代碼?

回答

0

難道你只是在添加!DOCTYPE html後增加高度? 你的html標籤被設置爲100%的高度嗎?有時候這會導致我的代碼出現問題。