讓我們面對它吧,普通的輸入表單按鈕是無聊而平淡的。所以我試着搜索,我想..也許你們知道一個更好的答案。Internet Explorer上的好看的按鈕(使用CSS)
你們知道我在哪裏可以找到性能的CSS按鈕,在Internet Explorer上工作?
感謝
讓我們面對它吧,普通的輸入表單按鈕是無聊而平淡的。所以我試着搜索,我想..也許你們知道一個更好的答案。Internet Explorer上的好看的按鈕(使用CSS)
你們知道我在哪裏可以找到性能的CSS按鈕,在Internet Explorer上工作?
感謝
我會建議使用CSS的background-image屬性來改變輸入按鈕的渲染方式。您可以設置固定的像素寬度和高度,並使用Photoshop或Gimp等程序創建背景圖形。如果你需要按鈕標籤是動態的,那麼使圖片沒有文字標籤。這種方法不像其他方法那麼靈活,但它確保您的按鈕在IE,FireFox和幾乎所有其他瀏覽器中看起來都一樣。下面是一個例子CSS類適用於使用了「拉門」的方法,讓你給你的按鈕懸停突出你輸入按鈕:
.my-styled-button {
background-image: url('images/my-button-background.png');
background-repeat: no-repeat;
background-position: 0px 0px;
width: 150px;
height: 80px;
text-align: center;
font-size: 12px;
border: none;
}
.my-styled-button:hover {
background-position: 0px -80px;
}
這是一個老問題,但我建議您Twitter Bootstrap。
這是一個HTML/CSS框架,它允許您輕鬆地製作great buttons(等等)。
此按鈕是「crossbrowser」這意味着它們是兼容Internet Explorer。
只有一個類別 - btn
- 您可以設定<button>
,<input type="button">
或<a>
。
此:
<button class="btn"></button>
給出:
btn-primary
,btn-info
,btn-success
,btn-warning
,btn-danger
:
您還可以快速與可選類自定義按鈕和btn-inverse
。
這個類轉換你的按鈕,像:
然後你可以選擇一個大小與類btn-large
,btn-small
和btn-mini
。
最後,您可以在按鈕中添加一個圖標(the list is here)。
此:
<button class="btn btn-success">
<i class="icon-shopping-cart icon-white"></i>
<span>Checkout</span>
</button>
給出:
與你的新的按鈕樂趣。 :)
我有一些我做了,但離開辦公室幾天。我會盡量記住爲你發佈。 – ErikE 2011-03-22 01:03:58
讓我們面對現實吧,IE是無聊而平淡的。 IE用戶習慣了它。 ;) – 2011-03-22 01:08:11
爲IE開發時,我儘量保持一切無聊。 – s84 2011-03-22 01:09:50