image

编辑人: 青衫烟雨

calendar2025-04-20

message4

visits816

CSS基础问题面试题

超链接访问之后 hover 样式就不出现的问题,怎么破?

说实话,这个问题的意义不太大了。

解决:就用css样式表按顺序设置 a:link, a:visited, a:hover, a:active 对应的样式即可。亦可在 a 中嵌套一个 span标签。

IE6双倍边距的bug

这种情况出现的条件是当浮动元素的浮动方向和浮动边界的方向一致时才会出现。如,元素向左浮动并且设置了左侧的外边距出现了这样的双边距bug。同理,元素向右浮动并且设置右边距也会出现同样的情况。同一行如果有多个浮动元素,第一个浮动元素会出现这个双边距bug,其它的浮动元素则不会。

解决:只需要给浮动元素加上 display:inline; 这样的CSS属性就可以了。

为什么Firefox中文本无法撑开容器的高度

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?

解决:去掉box的 height 属性设置,改为 min-height ,另外,如果想让IE6可以识别 min-height 可以如下:

div {
    height: auto !important;
    height: 200px;
    min-height: 200px;
}

为什么web标准中IE无法设置滚动条颜色

因为在IE中的设置是下面这样的:

body {
    scrollbar-face-color: #eee;
    scrollbar-highlight-color: #ccc;
    #scrollbar-shadow-color: #456;
    ...
}

解决:方法是将 body 标签中的样式应用于 html 标签上。

IE6下为什么无法定义1px左右高度的容器

这个问题在IE6下是因为默认的行高造成的,解决的方法有很多。

解决:下面三种的任何一种均可

overflow: hidden;
zoom: 0.08;
line-height: 1px;

怎样让一个box显示在Flash之上

解决:方法是给Flash设置透明

怎样让一个box垂直居中于浏览器中

以下的方法是在box的宽高定义(已知)的基础上才适用。才能通过绝对定位配合外边距补丁差值的方法。

解决:使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二。

Firefox嵌套div标签的水平居中问题的解决方法

假定有如下div嵌套结构:

<div id="a">
    <div id="b"></div>
</div>

如果要实现b在a中的居中防止,在IE中,一般只需用CSS设置a的 text-align: center 即可,但是在FF中却会是居左的。

解决:设置b的横向margin,如 margin: 0 auto; 即可。

如何使文本在div中垂直居中

文字的垂直居中,需要考虑行高以及它所在的框本身的高度等问题。

解决:通过将 line-height 设为和整个外层的div一样,配合 vertical-align 即可。

<div id="center"><p>test content</p></div>

body {
    text-align: center;
}
#center {
    margin:0 auto;
    height: 200px;
    line-height: 200px;
    vertical-align: middle;
    width: 400px;
}

图片下方出现几像素的空白间隙如何解决

解决方案也有好多种。

解决

  • 将img定义为 display: block;
  • 定义父容器的 font-size: 0;
  • vertical-align 设置为 text-top | text-bottom | middle 任意一个

喵呜刷题:让学习像火箭一样快速,快来微信扫码,体验免费刷题服务,开启你的学习加速器!

创作类型:
原创

本文链接:CSS基础问题面试题

版权声明:本站点所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明文章出处。
分享文章
share