前端工作面试问题(上)(10)

 

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE可识别 <![endif]--> <!--[if IE 6]> 仅IE6可识别 <![endif]--> <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]--> <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]--> <!--[if IE 7]> 仅IE7可识别 <![endif]--> <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]--> <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]--> <!--[if IE 8]> 仅IE8可识别 <![endif]--> <!--[if IE 9]> 仅IE9可识别 <![endif]-->

如何为有功能限制的浏览器提供网页?

    1)对于那些可以手动开启的功能,可以在页面上增设“用户使用指导”或“帮助手册”,提示用户如何开启相关的功能。(如果你不介意,还可以完全禁掉页面,强制用户使用固定设备,升级版本;哈哈,当年我做的BMS就是这样做)

      例如,针对使用IE浏览器自带的功能可以限制对网页的浏览,比如activeX或者脚本,我们检测到它不可用时,提示用户启用的操作方式。

    2)尽量避免当js或者css3失效时,页面不可用的动画效果。

      例如,网站为了营造一种当页面加载完毕,不同模块滚动到固定位置的绚丽动画效果。应该避免类似的效果,一方面产生繁琐的重绘过程,会消耗浏览器内存,对性能一般的设备可能因为压力过大,卡机或者无法渲染;另外一方面是网站当网站的js不可用时,模块滚动到固定位置的事件没有被触发,用户看到的将会是动画产生之前,最原始的页面状态,无法经行下一步操作。

    (首次接触“优雅降级”这个词汇是在《jQuery基础教程(第4版)》,不过那时候已经是一年多以前,现在已经记不清当时书上举得例子了,记性差~真心抱歉)

         3)应该为绑定异步的元素,设置herf属性。

    例如,用户要执行查询某书本详细信息操作,点击“查询”按钮,通过js触发查询该条目的事件,然后采用jQuery异步执行操作,在页面固定位置加载相关书本的详细内容。$(".delete").click(function(){$.ajax(//..)}),但是一旦js不可用,或者jQuery无发加载的时候,用户将无法顺利执行操作。因此,可以为该操作设置herf属性,当$.ajax()可用时阻止直接跳转,而使用异步;当$.ajax()不可用时,直接跳转到详细信息的页面。

   4)避免依赖脚本验证表单。服务器的表单验证不可避免。

   5)部分浏览器不支持html5新标签,因此,可以用js创建相关标签,然后给它们的css赋予相关属性。

   6)因为iPhone并没有鼠标指针,所以没有hover事件。那么CSS :hover伪类就没用了。但是iPhone有Touch事件,onTouchStart 类似 onMouseOver,onTouchEnd 类似 onMouseOut。所以我们可以用它来模拟hover。使用Javascript:

 

var myLinks = document.getElementsByTagName('a'); for(var i = 0; i < myLinks.length; i++){   myLinks[i].addEventListener(’touchstart’, function() {
  
this.className = “hover”;}, false);   myLinks[i].addEventListener(’touchend’, function(){this.className = “”;}, false); }

 

然后用CSS增加hover效果:

a:hover, a.hover { /* 你的hover效果 */ }

你会使用哪些技术和处理方法?

有哪些的隐藏内容的方法(如果同时还要保证屏幕阅读器可用呢?)

    需要隐藏内容的几种可能性: 

    1)对文本的隐藏

    2)隐藏超链接(另类黑链)

    3)对统计代码隐藏

    4)隐藏超出图片

    5)css隐藏滚动条

    6)css隐藏div层

  具体实现:

     1、css隐藏DIV及内容,完全隐藏内容与布局。display:none或者visibility:hidden

      (面试官也许会问到:关于display:none和visible:hidden区别)

    display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别:

    display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。

    visible:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/1287c5e455583263de605555e03a89e2.html