分享幾個前端乾貨，面試常常提

1、怎麼讓Chrome支持小於12px 的文字？

這個咱們在作移動端的時候，設計師圖片上的文字假如是10px，咱們實如今網頁上以後。每每設計師回來找咱們，這個字體能小一些嗎？我設計的是10px？爲啥是12px?其實咱們都知道，谷歌Chrome最小字體是12px，無論你設置成8px仍是10px，在瀏覽器中只會顯示12px，那麼如何解決這個坑爹的問題呢？

咱們的作法是：

 

針對谷歌瀏覽器內核，加webkit前綴，用transform:scale()這個屬性進行縮放！

<style>

p span{font-size:10px;-webkit-transform:scale(0.8);display:block;}

</style>

<p><span>haorooms博客測試10px</span></p>

2、IOS手機瀏覽器字體齒輪

修改-webkit-font-smoothing屬性，結果是：

-webkit-font-smoothing: none: 無抗鋸齒
-webkit-font-smoothing: antialiased | subpixel-antialiased | default: 灰度平滑

3、如何修改chrome記住密碼後自動填充表單的黃色背景？

大致能夠經過input : -webkit-autofill來進行修改！

input:-webkit-autofill {
background-color: #FAFFBD;
background-image: none;
color: #000;
}

4、谷歌瀏覽器運行下面代碼，並解釋！

[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) })

運行上面代碼以後，會發現HTML層都被使用不一樣的顏色添加了一個高亮的邊框。爲何會這樣呢？

首先咱們來看

[].forEach.call()，關於call()和apply()，我前面有文章也寫過，具體能夠看http://www.haorooms.com/post/js_constructor_pro

[].forEach.call()等價於Array.prototype.forEach.call()

其次咱們來看$$("*")

你能夠在你的Chrome瀏覽器控制檯中輸入$$('a')，而後你就能獲得一個當前頁面中全部錨元素的列表。

$$函數是許多現代瀏覽器命令行API中的一個部分，它等價於document.querySelectorAll,你能夠將一個CSS選擇器做爲這個函數的參數，而後你就可以得到當前頁面中全部匹配這個CSS選擇器的元素列表。若是你在瀏覽器控制檯之外的地方，你可使用document.querySelectorAll('')來代替$$('')

爲元素添加顏色

爲了讓元素都有一個漂亮的邊框，咱們在上面的代碼中使用了CSS屬性outline。outline屬性位於CSS盒模型以外，所以它並不影響元素的屬性或者元素在佈局中的位置，這對於咱們來講很是有用。這個屬性和修改border屬性很是相似，所以下面的代碼應該不會很難理解：

a.style.outline="1px solid #" + color

真正有趣的地方在於定義顏色部分：

~~(Math.random()*(1<<24))).toString(16)

~~的做用至關於parseInt，和我前面講解的「|」功能相似，關於運算符「I」 ，能夠去看看！

經過上面代碼能夠獲取到一個隨機的顏色值！

5、input [type=search] 搜索框右側小圖標如何美化？

美化效果以下圖：

右側默認的比較難看的按鈕，美化成右側效果。

input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance: none;height: 15px; width: 15px;border-radius: 8px;background:url("images/searchicon.png") no-repeat 0 0;background-size: 15px 15px;}

用到的是僞元素::-webkit-search-cancel-button，關於什麼是僞類和爲元素，請看：http://www.haorooms.com/post/css_wl_wys

6、iOS safari 如何阻止「橡皮筋效果」？

能夠參考一下知乎上的回答 https://www.zhihu.com/question/22256539 。

可是，咱們遇到的問題不是這樣，我是要解決彈跳致使彈出層（position:absolute）的覆蓋層高度小於100%;

針對這個問題，我想到的解決方案以下：

方法一：
把position:absolute改爲position:fixed，並在彈出層以後，設置body的高度是100%；overflow是hidden。

方法二：

思路是獲取蘋果瀏覽器導航欄的高度。而後滾動的時候，從新獲取其高度。在導航欄高度變小的時候，給彈出層增長高度的百分比！

代碼以下：

//ios safari 伸縮判斷
      var topbarHeight=window.outerHeight-window.innerHeight,agent=navigator.userAgent,globleflag=true;
        $(window).scroll(function () {
           if(agent.indexOf("iPhone")!=-1 || agent.indexOf("iPad")!=-1){
                var topbarHeightNow=window.outerHeight-window.innerHeight;
                if(topbarHeightNow<topbarHeight){
                    globleflag=false
                     //此處寫處理邏輯
                }else{
                 globleflag=true  
                    //此處寫處理邏輯
               }
            }
 });