Q

CSS不工作的按鈕appearence - Internet Explorer的

2012-07-13 107 views 3 likes

3

我對目前之情況下HTML和CSS：CSS不工作的按鈕appearence - Internet Explorer的

enter image description here

正如你可以看到，搜索文本框和過濾器的下拉是完美地呈現在 - 線。但按鈕正在出現。

這裏是所有3個控件的HTML代碼：

<table> 
<tbody> 
    <tr> 
     <td> 
      <div class="search_result_div"> 
       <div> 
        <input type="text" style="width:200px;" id='searchButton' value="some text"><span>&nbsp;&nbsp;in&nbsp;&nbsp;</span> 
        <select id="filterDropdown"> 
         <option value="all" selected="selected">All Areas</option> 
         <option value="docs">Documents</option> 
        </select> 
        &nbsp;&nbsp; 
        <a onclick="return callSearch();" class="btn" id="searchButton" href="../sys/SearchResults.aspx?q="><span>Search</span></a> 
       </div> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     </td> 
    </tr> 
</tbody> 
</table>

這裏是所有控件的CSS：

.search_result_div a.btn 
    { 
     background: url("/images/bg_btn_left.gif") no-repeat scroll left center transparent; 
     display: inline !important; 
      float: none; 
     font-size: 11px !important; 
     line-height: 21px !important; 
     margin: 0 !important; 
     outline: medium none; 
     padding: 3px 0 3px 2px !important; 
     text-indent: inherit !important; 
    } 

.search_result_div a.btn span 
    { 
     background: url("/images/bg_btn.gif") no-repeat scroll right center transparent; 
     font-weight: bold !important; 
     margin: 0 !important; 
     padding: 4px 8px 4px 6px !important; 
    }

注：該按鈕分爲兩個圖像。

bg_btn_left.gif： enter image description here

bg_btn： enter image description here

請建議我要去哪裏錯了？

謝謝

2012-07-13 Amin Sayed

+0

嘿，現在給輸入{垂直對齊：首位; }在你的css文件中 – 2012-07-13 06:40:23

+0

謝謝。你能告訴我我應該把它放在哪裏嗎？ – 2012-07-13 06:42:59

A

回答

1

試試這個：

<style type="text/css"> 
.search_result_div a.btn 
{ 
    background: url("bg_btn_left.gif") no-repeat scroll left top transparent; 
    display: inline !important; 
     float: none; 
    font-size: 11px !important; 
    line-height: 21px !important; 
    margin: 0 !important; 
    outline: medium none; 
    padding: 4px 0 3px 2px !important; 
    text-indent: inherit !important; 
} 

.search_result_div a.btn span 
{ 
    background: url("bg_btn.gif") no-repeat scroll right top transparent; 
    vertical-align:top; 
    font-weight: bold !important; 
    margin: 0 !important; 
    padding: 4px 8px 4px 6px !important; 
} 
</style>

2012-07-13 07:02:45

1

它是我必須經歷自己的問題之一。我想我通過將所有默認邊距和填充設置爲零來解決此問題。看看是否有幫助你。

*{margin:0px; padding:0px;}

，或者如果它的對準使用

vertical-align: middle;

2012-07-13 06:41:03

1

對於內聯元件的問題，則可以使用垂直對齊：中部; CSS屬性以verticaly對齊。

2012-07-13 06:41:26 odupont

1

看這裏，它是：http://jsfiddle.net/YUXxf/ 你的代碼的工作，如你所願，但我認爲圖像具有頂部邊框較大，其向下推圖像..

2012-07-13 06:43:17 doniyor

+0

它在Firefox中工作，但圖像在右側顯示朝下。但在IE中，它完全隱藏，因爲我已上傳的圖像。你在IE中正確得到這個嗎？ – 2012-07-13 06:55:24

+0

對不起，我沒有看到您的評論。是的，我在FF中做到了。 IE中的 – doniyor 2012-07-13 12:57:16

+0

也是一樣的正確視力。請檢查您的圖像邊界和圖像質量本身。它應該工作，因爲在這個小提琴.. – doniyor 2012-07-13 12:58:43

1

我總是這個css文件css.reset添加到我的項目以確保我不使用瀏覽器定義的默認CSS設置。

2012-07-13 06:44:57 ThdK

+0

我不能這樣做，因爲除了我的團隊擁有的搜索CSS以外，不同的團隊是CSS。謝謝。 – 2012-07-13 06:51:07

1

嘿，我覺得你應該給某些屬性，您.search_result_div a.btn

像這樣

input{ 
vertical-align:top; 
} 
.search_result_div a.btn{ 
display:inline-block; 
vertical-align:top; 
*display:inline; // for ie 
}

2012-07-13 06:50:07

相關問題