引導程序交叉瀏覽器問題與選擇控件

引導程序可能在呈現其窗體選擇控件的方式方面存在一些問題。引導程序交叉瀏覽器問題與選擇控件

請參考下圖，看看我的意思。

該代碼不能更簡單，它告訴我該修補程序可能在Bootstrap本身之外。這是我的代碼

HTML

<div class="col-sm-4"> 
    <select> 
     <option>- Jump To -</option> 
     <option>Option 1</option> 
     <option>Option 2</option> 
     <option>Option 3</option> 
     <option>Option 4</option> 
    </select> 
    <button class="btn btn-green btn-go">GO</button> 
    </div>

CSS

select { 
    color: lighten(@pss-black, 30%); 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    width: 230px; 
    height: 32px; 
    padding: 0 34px 0 10px; 
    border: 1px solid lighten(@pss-black, 80%); 
    -webkit-border-radius: 0; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    border-bottom-left-radius: 5px; 
    border-bottom-right-radius: 5px; 
    font-size: 1em; 
    background: @pss-white url('@{img-path}bg_select.png') no-repeat 100% 50%; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    letter-spacing: normal;

}

任何人都知道如何使FF和IE瀏覽器看起來像Chrome瀏覽器？......如果可能的話，沒有額外的插件。我想用最少的腳本

enter image description here

來源

2014-03-03 LOTUSMS

admin - 感謝您的遷移:) – LOTUSMS

好吧，我理解了它來建立這個/圖片使用（在引導框架大多是純CSS）。我希望這可以幫助別人。顯然，Dream.in.Code或Codeproject中沒有人知道這一點。在這裏。

第一件事，第一......你需要head.min.js here

Head.js作爲一位現代主義，但實際上你可以通過它的名稱標識每個瀏覽器，並告訴它，而你是應用類對於一個元素，你實際上希望他們「分開」去做一些不同的事情。

這是我用於FF和IE的隔離代碼*介意你，我正在使用.less。因此，爲你調整CSS前端開發者

/* ++++ Styles for IE Browser Compatibility ++++ */ 
html.ie select { 
padding: 4px 5px 4px 10px !important; 
background: lighten(@pss-black, 65%) !important; 
background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhZWFlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZGZkZmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+) !important; 
background: -ms-linear-gradient(top, #eaeaea 0%,#fdfdfd 100%) !important; 
background: linear-gradient(to bottom, #eaeaea 0%,#fdfdfd 100%) !important; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaeaea', endColorstr='#fdfdfd',GradientType=0) !important; 
    } 

    /* ++++ Styles for Firefox Compatibility ++++ */ 
    @-moz-document url-prefix() { 
select { 
    padding: 4px 5px 4px 10px !important; 
    text-indent: 0.01px; 
    text-overflow: ''; 
} 
    } 

    /* ++++ Removes the alt="..." on top of the image in Firefox ++++ */ 
    .ui-datepicker-trigger{ 
    color:transparent; 
    }

快樂編碼！

來源

2014-03-04 22:14:12 LOTUSMS

引導程序交叉瀏覽器問題與選擇控件

回答

相關問題