Chrome CSS失敗

嗨我想改變一個select元素的CSS，它在Firefox中工作正常，但它不適用於谷歌瀏覽器。當我試圖使用Chrome開發者工具，我看到Styles/Matched CSS Rules下的元素高度成功更改爲30px但是當我去Computed Style的height顯示爲18px但是當我點擊箭頭以獲得更多的信息，它表明高度應該30pxChrome CSS失敗

#new-job select - 30px

我是新的HTML/CSS和鉻合金的開發工具，但現在看來似乎應該是工作給我。這裏是我的代碼

<div id="new-job"> 
    <form accept-charset="UTF-8" action="/jobs" class="new_job" id="new_job" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="vfKmC+vnnIl/6icDIbDRfZghNR927qmEqTdB9I2OeMQ="></div> 

    <div class="field"> 
     <label for="job_category">Category</label> 
     <select id="job_category" name="job[category]"><option value=""></option> 
       <option value="Bistro Card">Bistro Card</option> 
       <option value="Dongle">Dongle</option> 
       <option value="Return">Return</option> 
       <option value="Catering">Catering</option> 
       <option value="Other">Other</option></select><br><br> 
    </div> 
    <div class="field"> 
     <label for="job_location">Location</label><br> 
     <input id="job_location" name="job[location]" size="30" type="text"> 
    </div> 
    <div class="field"> 
     <label for="job_description">Description</label><br> 
     <textarea cols="40" id="job_description" name="job[description]" rows="20"></textarea> 
    </div> 
    <div class="actions"> 
     <input class="button small radius" id="submit-job" name="commit" type="submit" value="create job"> 
     <a href="/jobs" class="button small radius secondary">go back</a> 
     <div id="new-job-errors"> </div> 
    </div> 
    </form> 
</div>

而且繼承人我CSS

#new-job { 
    select {height: 30px;} 
}

來源

2013-07-18 user2158382

你發佈你的問題之前，你應該確保你的「代碼」實際上是正確的：http://jigsaw.w3.org/css-validator/ – 2013-07-19 10:47:57

正確的語法應該是

#new-job select { 
    height: 30px; 
}

來源

2013-07-18 23:17:58 Yehuda

要選擇您可以使用分配的ID的select元素或標籤本身。

兩者的一個例子是在這裏 - http://jsfiddle.net/9HndG/

在你的CSS，它應該是這樣的：

通過ID按標籤

select{ 
    width:200px; 
}

#job_category{ 
    height:30px; 
}

雙方

select#job_category{ 
    height:30px; 
}

來源

2013-07-19 01:06:07 lukeocom

的就像我用其他解決方案解釋的一樣，css風格很好。當我在google chrome開發工具中查看時，css也採用匹配的css樣式。但是當我看着開發工具的「計算風格」時，它仍然顯示爲18px – user2158382

計算出的寬度很可能不包括邊框和填充尺寸。如果添加邊框：0;和/或填充：0;它是否給出相同的18px計算結果？ – lukeocom

添加一些風格在你<select>

<select id="job_category" name="job[category]" style="height:30px;">...

來源

2013-07-19 10:03:52 art

回答

相關問題