CSS 兼容总结及面试问题

南宫天明 发布于 2012/08/30 15:34
阅读 619
收藏 12

    CSS 兼容总结及面试问题

  • +1、如何定义高度很小的容器?

    原因:在IE6下无法定义小高度的容器,是因为有一个默认的行高。
    解答:列举2种解决方案:overflow:hidden 或 line-height:0

  • +2、图片下方出现几像素的空白间隙?

    原因:图片是沿着基线对齐的,所以会有间隙
    解答:将img定义为display:block,或定义父容器为font-size:0,更推荐使用vertical-align的方式,它的值可以是text-top|text-bottom|middle等

  • +3、IE6双倍margin的BUG?

    原因:暂不明确
    解答:display:inline;

  • +4、文本垂直方向对齐文本输入框?

    原因:默认是不会居中的
    解答:设置input为vertical-align:middle,textarea也是如此

  • +5、为什么在web标准下ie无法设置滚动条的颜色?

    原因:因为W3C标准中,没有滚动条样式的定义
    解答:将设置滚动条颜色的样式定义到html标签选择符上即可

  • +6、如何让层在falsh上显示?

    原因:无法定义因为FLASH 权重比其他元素高
    解答:设置FLASH背景透明,这时层就会透过falsh显示,近似于覆盖在flash之上了。
    <paramname="mode"value="transparent"/>

  • +7、如何使得文字不换行?

    原因:
    解答:定义包含文字的容器为:width:xxx; white-space:nowrap;

  • +8、ie中如何让超出宽度的文字显示为省略号?

    原因:
    解答:定义包含文字的容overflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis;

  • +9、如何在点文字时也选中checkbox?

    原因:
    解答: <label for="xuanzhong">选中</label><input type="checkbox" id="xuanzhong" />
    这种包含方式IE6不支持
    <label>选中<input type="checkbox" /></label>

  • +10、一个div为margin-bottom:10px,一个div为margin-top:5px,为什么2个div之间的间距是10px而不是15px?

    原因:这种情况浏览器会自动进行margin重叠,只显示较大的margin值
    解答:只设置其中一个div的margin为15px;

  • +11、如何解决ie下当li中出现2个或以上的浮动时,li之间产生的空白间隙?

    原因:仅当只有浮动元素时才出现此bug
    解答:设置vertical-align即可值可以为top|text-top|middle|bottom|text-bottom

  • +12、如何使得英文单词不发生词内断行?

    原因:
    解答:word-wrap:break-word;

  • +13、为什么被访问过的链接颜色没有变化?

    原因:浏览器默认是给未访问与访问过的链接不同颜色的,如果颜色相同就是覆盖所致,可能的一个覆盖的原因是将各个伪类的顺序写反了
    解答:定义链接的样式时,需要按照:link,:visited,:hover,:active这样的顺序,可以使用LoVeHAte(喜欢讨厌)来记忆

  • +14、单行文本如何垂直居中?

    原因:
    解答:height:xxx;line-height:xxx;高和行高相同即可

  • +15、已知高度的容器如何在页面中水平垂直居中?

    原因:
    解答:这个要说的就比较多了, 首先 width:xxx; height:xxx; poistion:relative; top:50%; margin:-height/2 auto 0 auto;
    demo:
    <div style="width:300px; height:200px; position:relative; top:50%; margin:-100px auto 0 auto">垂直居中</div>

  • +16、未知尺寸的图片图如何水平垂直居中?

    原因:不好用语言表达,直接看demo
    解答:支持dislpay:table的浏览器(非IE)display:table; width:xxx; height:xxx;
       不支持的(IE)需要定位
    demo:
    <style type="text/css">
    .outer{ display:table; *display:inline; *position:relative; width:300px; height:300px; }
    .outer p{ display:table-cell; *position:absolute; *top:50%; *left:50%; vertical-align:middle; }
    .outer p img{ *position:relative; *top:-50%; *left:-50%; vertical-align:middle; }
    </style>
    <ul class="dybox">
    <li class="outer"> <p><img src="1.gif" alt="图片水平垂直居中" /></p> </li>
    <li class="outer"> <p><img src="2.gif" alt="图片水平垂直居中" /></p> </li>
    <li class="outer"> <p><img src="3.gif" alt="图片水平垂直居中" /></p> </li>
    </ul>

  • +17、标准模式和怪异模式下的盒模型区别?

    原因:也许有同学还不清楚CSS盒模型有两种,这里给大家说下。
    解答:1.标准下的CSS盒模型 实际宽度= width:width+padding+boeder;
       2.IE下的CSS盒模式 实际宽度=width:width-padding-border;

  • +18、如何解决IE下的3像素BUG?

    解答:代码太多参考 http://blog.doyoe.com/article.asp?id=68;

  • +19、如何做1像素细边框的table?

    原因:各个浏览器默认表格与单元格之间、单元格与单元格之间的边框是不共用的
    解答:给table加上边框共用的css即可:border-collapse:collapse;

  • +20、以图换字的几种方法及优劣分析

    原因:以图换字,其实是为了保证页面的可读性,这样既有利于搜索引擎,又有利于结构查看。由于这种方式被大多数人所认同,所以方法也越来越多
    解答:
    方法1:使用text-indent的负值,将内容移出容器;
    方法2:使用display:none,将内容隐藏;
    方法3:使用padding将文字挤出容器之外,并将超出的部分hidden;
    方法4:使用font设置超小字体,达到隐藏内容的目的。

    方法1(非常不推荐)看起来蛮简单,但其实有几个不理想的地方,1是比较吃资源;2是在ie5下面会出现滞后背景无法显示;3是内容为超链接时,长长的黑色虚框,让你抓狂。
    方法2(不推荐)其实倒也不复杂,只是需要多添加一个标签,比较浪费;且display:none出现的几率太多,对seo也是会有些许影响的。
    方法3(推荐)StandardModel下要2层标签才能搞定,不过相对方法1和2还是有优势的,推荐一下。
    方法4(强烈推荐)只需要将字体和行高设置为0,然后overflow:hidden就行;不过这样在Safari和Chrome下还是会有1px高的字出现,所以应该再设置一下字体的颜色和背景图相同或相近。以此就同样可以达到隐藏内容的目的,暂时还没发现有什么副作用,强烈推荐。

  • +21、如何容器透明,内容不透明?

    解答: <div class="outer" style="position:relative; z-index:0; filter:alpha(opacity:30); opacity:0.3"></div>
        <div class="inner" style="position:absolute; z-index:1;">我不要透明</div>  

  • +22、如何去掉链接的虚线框?

    解答:IE下:<a href="#"onfocus="this.blur();"...> a:focus{outline:none}
       FF下:a{outline:none;}

  • +23、如何使得页面字体行距始终保持n倍字体大小为基调?

    解答:在 body 里设置 line-height:xx 即可。 这里提一点line-height 最好不要加单位

  • +24、如何使用标准的方法插入flash?

    解答:
    <div class="fla-show">
    <object type="application/x-shockwave-flash" data="*.swf" width="*" height="*">
    <param name="movie"value="*.swf"/> <img src="*.jpg" alt="用于不支持flash或屏蔽flash时显示"/>
    </object>
    </div>

  • +25、Standard Model如何让容器可以height:100%?

    解答:html,body{height:100%; margin:auto;}

  • +26、如何使得表格的宽度固定?

    解答:设置table为table-layout:fixed;这时表格将使用固定布局算法,多出的内容将不影响表格的宽度

  • +27、如何让min-height兼容ie6?

    解答:IE6高度是会自动撑开的,所以为了让min-height在所有浏览器兼容,单独hack:_height即可

  • +28、如何让鼠标变成手型且兼容所有现代浏览器?

    解答:cursor:pointer;

  • +29、如何实现ie6下的position:fixed?

    原因: IE6下不支持 position:fixed
    解答:{position:absolute;left:expression(eval(document.documentElement. scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this. currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0)); top:expression(eval(document.documentElement.scrollTop+document.documentElement. clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)- (parseInt(this.currentStyle.marginBottom,10)||0)))}

  • +30、IE下如何对Standard Mode与Quirks Mode进行切换?

    解答:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
    IE6的触发(在XHTML的DTD申明前加上XML申明):
    <?xmlversionxmlversion="1.0"encoding="utf-8"?> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    当没有使用DTD声明或者使用HTML4以下(不包括HTML4)的DTD声明时,基本所有的浏览器都是使用QuirksMode呈现。

  • +31、如何给一个元素定义多个不同的css规则?

    解答:class="style1 style2 style3..."

  • +32、如何区别display:none与visibility:hidden?

    解答:相同的是display:none与visibility:hidden都可以用来隐藏某个元素;
       不同的是display:none在隐藏元素的时候,将其占位空间也去掉;而visibility:hidden只是隐藏了内容而已,其占位空间仍然保留。

  • +33.请写出几个HTML5的特性?

    解答:自己回答,仁者见仁,智者见智。

  • +34.请写出几个CSS3的特性?

    解答:自己回答,仁者见仁,智者见智。

  • +35.css sprite的优势和劣势?

    解答:减少请求,也能使图片总共占用空间变小,减少下载时间,缺点就是维护性差。
    css sprite

  • +36.css中使用的dataURI的优势和劣势?

    解答:
    1. 减少 HTTP 请求,节约带宽:
    2. 避免频繁建立 TCP 连接,加快载入速度:
    3. 使用 HTTPS 时,可减少开销:
    4. 避免浏览器并发连接数的限制:
    5. 防止非法的外部引用:
    缺陷:
    1. 不被单独缓存,父文件重新载入时必须重新加载:
    2. 内容变更时必须重新编码和嵌入:
    3. 缺乏 IE6 和 IE7 的支持:
    4. IE8 限制数据大小为 32k:
    5. base64 编码会增加 1/3 数据量:
    dataURI

群代码由CSS禅意花园 小曾收集并分享
加载中
0
艾皮狗
艾皮狗
太强了,必须收藏
返回顶部
顶部