分享几个前端干货，面试常常提

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  
                    //此处写处理逻辑
               }
            }
 });