点击切换帐号登陆
帐号密码登陆

  • 章节

  • 笔记

  • 评论
第1章 CSS 入门教程
1-1CSS速查总表
1-2CSS 教程学习导读
1-3CSS简介
1-4CSS语法
1-5CSS 创建
1-6CSS 定位(Position)
1-7CSS 布局(Layout)
1-8CSS 尺寸 (Dimension)
1-9CSS 外边距(Margin)
1-10CSS 填充(Padding)
1-11CSS 背景(Backgrounds)
1-12CSS 边框(Border)
1-13CSS 颜色(Color)
1-14CSS 字体(Fonts)
1-15CSS 文本(Text)
1-16CSS 文本装饰(Text Decoration)
1-17CSS 书写模式(Writing Modes)
1-18CSS 列表样式(List)
1-19CSS 表格(Table)
1-20CSS 内容(Content)
1-21CSS用户界面(User Interface)
1-22CSS打印(Print)
1-23CSS媒体查询(Media Queries)
1-24CSS 链接(Link)
1-25CSS 轮廓(Outline)
1-26CSS 分组 和 嵌套(Grouping and Nesting)
1-27CSS 浮动 (Float)
1-28CSS 盒子模型(Box Model)
1-29CSS 显示(Display)
1-30CSS 导航栏(Navigation Bar)
1-31CSS 溢出(Overflow)
1-32CSS 下拉菜单(Drop down menu)
1-33CSS 对齐(Align)
1-34CSS 提示工具(Prompt Tool)
1-35CSS 图片廊(Image Gallery)
1-36CSS 图像透明/不透明(Opacity)
1-37CSS 图像拼合技术(Image stitching technique)
1-38CSS 媒体类型(Media Type)
1-39Only IE
1-40Only Webkit
1-41Only Firefox
1-42CSS 总结
第2章 CSS 原生手册
2-1CSS 手册导读
2-2CSS 选择器
2-3CSS 听觉参考手册
2-4CSS Web安全字体组合
2-5CSS 动画
2-6CSS 函数
2-7CSS 单位
2-8CSS 颜色
2-9CSS 颜色值
2-10CSS 颜色名
2-11CSS 颜色十六进制
第3章 CSS 函数 Function
3-1CSS attr() 函数
3-2CSS calc() 函数
3-3CSS linear-gradient() 函数
3-4CSS radial-gradient() 函数
3-5CSS repeating-linear-gradient() 函数
第4章 CSS选择器 Selectors
4-1元素选择符
4-2关系选择符
4-3属性选择符
4-4伪类选择符
4-5伪对象选择符
第5章 CSS取值与单位 Values and Units
5-1CSS 长度(Length)
5-2CSS 角度(Angle)
5-3CSS 时间(Time)
5-4CSS 频率(Frequency)
5-5CSS 布局(Layout-specific)
5-6CSS 分辨率(Resolution)
5-7CSS 文本(Textual)
5-8CSS 函数(Functional)
5-9CSS 生成内容(Content)
5-10CSS 图像(Image)
5-11CSS 数字(Numeric)
第6章 CSS语法与规则 Rules
6-1!important
6-2comment
6-3@import
6-4@page
6-5@supports
第7章 CSS 属性 Property
7-1border-top
7-2scan
7-3border-top-color
7-4overflow-wrap
7-5border-top-left-radius
7-6text-size-adjust
7-7border-top-right-radius
7-8text-decoration-skip
7-9text-underline-position
7-10border-top-style
7-11column-break-before
7-12border-top-width
7-13column-break-after
7-14border-width
7-15column-break-inside
7-16bottom
7-17text-fill-color
7-18box-align
7-19box-reflect
7-20box-direction
7-21tap-highlight-color
7-22user-drag
7-23box-flex
7-24border-colors
7-25box-flex-group
7-26border-top-colors
7-27box-lines
7-28border-right-colors
7-29box-ordinal-group
7-30border-bottom-colors
7-31border-left-colors
7-32box-orient
7-33scrollbar-3dlight-color
7-34box-pack
7-35scrollbar-darkshadow-color
7-36box-shadow
7-37scrollbar-highlight-color
7-38box-sizing
7-39scrollbar-shadow-color
7-40caption-side
7-41scrollbar-arrow-color
7-42clear
7-43scrollbar-arrow-color
7-44clip
7-45scrollbar-face-color
7-46color
7-47scrollbar-track-color
7-48column-count
7-49scrollbar-base-color
7-50column-fill
7-51behavior
7-52column-gap
7-53column-rule
7-54column-rule-color
7-55column-rule-style
7-56column-rule-width
7-57column-span
7-58column-width
7-59columns
7-60content
7-61counter-increment
7-62counter-reset
7-63cursor
7-64direction
7-65display
7-66empty-cells
7-67filter
7-68flex
7-69flex-basis
7-70flex-direction
7-71flex-flow
7-72flex-grow
7-73flex-shrink
7-74flex-wrap
7-75float
7-76font
7-77@font-face
7-78font-family
7-79font-size
7-80font-size-adjust
7-81font-stretch
7-82font-style
7-83font-variant
7-84font-weight
7-85grid-columns
7-86grid-rows
7-87hanging-punctuation
7-88height
7-89icon
7-90justify-content
7-91@keyframes
7-92left
7-93letter-spacing
7-94line-height
7-95list-style
7-96list-style-image
7-97list-style-position
7-98list-style-type
7-99margin
7-100margin-bottom
7-101margin-left
7-102margin-right
7-103margin-top
7-104max-height
7-105max-width
7-106@media
7-107min-height
7-108min-width
7-109nav-down
7-110nav-index
7-111nav-left
7-112nav-right
7-113nav-up
7-114opacity
7-115order
7-116outline
7-117outline-color
7-118outline-offset
7-119outline-style
7-120outline-width
7-121overflow
7-122overflow-x
7-123overflow-y
7-124padding
7-125padding-bottom
7-126padding-left
7-127padding-right
7-128padding-top
7-129page-break-after
7-130page-break-before
7-131page-break-inside
7-132perspective
7-133perspective-origin
7-134position
7-135punctuation-trim
7-136quotes
7-137resize
7-138right
7-139rotation
7-140tab-size
7-141table-layout
7-142target
7-143target-name
7-144target-new
7-145target-position
7-146text-align
7-147text-align-last
7-148text-decoration
7-149text-decoration-color
7-150text-decoration-line
7-151text-decoration-style
7-152text-indent
7-153text-justify
7-154text-outline
7-155text-overflow
7-156text-shadow
7-157text-transform
7-158text-wrap
7-159top
7-160transform
7-161transform-origin
7-162transform-style
7-163transition
7-164transition-delay
7-165transition-duration
7-166transition-property
7-167transition-timing-function
7-168unicode-bidi
7-169pointer-events
7-170vertical-align
7-171user-select
7-172visibility
7-173ime-mode
7-174white-space
7-175zoom
7-176width
7-177-webkit-appearance
7-178word-break
7-179@charset
7-180word-spacing
7-181text-stroke
7-182word-wrap
7-183text-stroke-width
7-184z-index
7-185text-stroke-color
7-186writing-mode
7-187<angle>
7-188deg
7-189​grad
7-190rad
7-191turn
7-192s
7-193align-content
7-194ms
7-195<frequency>
7-196align-items
7-197Hz
7-198align-self
7-199kHz
7-200all
7-201<fraction>
7-202animation
7-203<grid>
7-204animation-delay
7-205fr
7-206animation-direction
7-207gr
7-208animation-duration
7-209<resolution>
7-210animation-fill-mode
7-211dpi
7-212animation-iteration-count
7-213dpcm
7-214dppx
7-215animation-name
7-216unset
7-217animation-play-state
7-218<string>
7-219<url>
7-220animation-timing-function
7-221<identifier>
7-222appearance
7-223calc()
7-224backface-visibility
7-225toggle()
7-226background
7-227counter()
7-228background-attachment
7-229counters()
7-230attr()
7-231<image>
7-232background-blend-mode
7-233image()
7-234background-clip
7-235image-set()
7-236background-color
7-237<gradient>
7-238background-image
7-239repeating-radial-gradient()
7-240background-origin
7-241<integer>
7-242background-position
7-243<percentage>
7-244background-repeat
7-245background-size
7-246border
7-247border-bottom
7-248border-bottom-color
7-249border-bottom-left-radius
7-250border-bottom-right-radius
7-251border-bottom-style
7-252border-bottom-width
7-253border-collapse
7-254border-color
7-255border-image
7-256border-image-outset
7-257border-image-repeat
7-258page
7-259border-image-slice
7-260page-break-before
7-261border-image-source
7-262page-break-after
7-263page-break-inside
7-264border-image-width
7-265border-left
7-266border-left-color
7-267border-left-style
7-268border-left-width
7-269border-radius
7-270border-right
7-271device-width
7-272border-right-color
7-273device-height
7-274border-right-style
7-275orientation
7-276border-right-width
7-277aspect-ratio
7-278border-spacing
7-279device-aspect-ratio
7-280border-style
7-281color-index
7-282monochrome
7-283initial
7-284inherit
7-285RGBA
7-286Color Name
7-287HEX
7-288RGB
7-289HSL
7-290HSLA
7-291transparent
7-292currentColor
7-293<length>
7-294em
7-295ex
7-296ch
7-297rem
7-298vw
7-299vh
7-300vmax
7-301vmin
7-302cm
7-303mm
7-304q
7-305in
7-306pt
7-307pc
7-308px
7-309<number>
第8章 CSS附录 Appendix
8-1颜色关键字(Color Keywords)
8-2媒体类型(Media Types)
第9章 CSS HACK
9-1条件Hack
9-2属性级Hack
9-3选择符级Hack
第10章 问题和经验
10-1Bugs及解决方案列表
10-2CSS技巧和经验列表
10-3其它技巧和经验列表
10-4参考资源列表

Bugs及解决方案列表

Bugs及解决方案列表(以下实例默认运行环境都为Standard mode):

1、如何在IE6及更早浏览器中定义小高度的容器?

方法:

#test{overflow:hidden;height:1px;font-size:0;line-height:0;}

注:IE6及更早浏览器之所以无法直接定义较小高度的容器是因为默认会有行高

2、如何解决IE6及更早浏览器浮动时产生双倍边距的BUG?

方法:

#test{display:inline;}

注:当在IE6及更早浏览器中出现浮动后margin值解析为双倍的情况,设置该元素的display属性为inline即可。

3、如何在IE6及更早浏览器下模拟min-height效果?

方法:

#test{min-height:100px;_height:100px;}

注:此时#test不能再设置overflow的值为hidden,否则模拟min-height效果将失效

4、如何解决按钮在IE7及更早浏览器下随着value增多两边留白也随着增加的问题?

方法:

input,button{overflow:visible;}

5、如何解决IE7及更早浏览器下当li中出现2个或以上的浮动时,li之间产生的空白间隙的BUG?

方法:

li{vertical-align:top;}

注:除了top值,还可以设置为text-top | middle | bottom | text-bottom,甚至特定的<length><percentage>值都可以

6、如何解决IE6及更早浏览器下的3像素BUG?

方法:

.a{color:#f00;}
.main{width:950px;background:#eee;}
.content{float:left;width:750px;height:100px;background:#ccc;_margin-right:-3px;}
.aside{height:100px;background:#aaa;}

<div class="main">
	<div class="content">content</div>
	<div class="aside">aside</div>
</div>

注:在IE6及更早浏览器下为.content设置margin-right:-3px;也可以设置.aside为浮动

7、如何解决IE6下的文本溢出BUG(江湖匪号:“谍影重重”或“一只猪的故事”)?

BUG重现:

.test{zoom:1;overflow:hidden;width:500px;}
.box1{float:left;width:100px;}
.box2{float:right;width:400px;}

<div class="test">
	<div class="box1"></div>
	<!-- 注释 -->
	<div class="box2">↓这就是多出来的那只猪</div>
</div>

运行如上代码,你会发现文字发生了溢出,在IE6下会多出一只“猪”。造成此BUG的原因可能是多重混合的,如浮动,注释,宽高定义等等。并且注释条数越多,溢出的文本也会随之增多。

列举几个解决方法:

  • 删除box1和box2之间所有的注释;

  • 不设置浮动;

  • 调整box1或box2的宽度,比如将box的宽度调整为90px

8、如何解决IE6使用滤镜PNG图片透明后,容器内链接失效的问题?

方法:

div{width:300px;height:100px;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='*.png');}
a{_position:relative;}

解决方法是为容器内的链接定义相对定位属性position的值为relative

9、如何解决IE6无法识别伪对象:first-letter/:first-line的问题?

方法1:

p:first-letter {float:left;font-size:40px;font-weight:bold;}
p:first-line {color:#090;}

增加空格:在伪对象选择符:first-letter/:first-line与包含规则的花括号"{"间增加空格。

方法2:

p:first-letter
{float:left;font-size:40px;font-weight:bold;}
p:first-line
{color:#090;}

换行:将整个花括号"{"规则区域换行。细节参见E:first-letterE:first-line选择符

10、如何解决IE8会忽略伪对象:first-letter/:first-line里的!important规则的问题?

BUG重现:

p:first-letter {float:left;font-size:40px;font-weight:bold;color:#f00!important;color:#090;}

如上代码,在IE8下color定义都会失效,原因就是因为有color使用了!important规则。鉴于此,请尽量不要在:first-letter/:first-line里使用!important规则。

11、如何解决IE6会忽略同一条样式体内的!important规则的问题?

BUG重现:

div{color:#f00!important;color:#000;}

如上代码,IE6及以下浏览器div的文本颜色为#000,!important并没有覆盖后面的规则,也就是说!important被忽略了。解决方案是将该样式拆分为2条,细节参见!important规则

12、如何解决IE6及更早浏览器下当li内部元素是定义了display:block的内联元素时底部产生空白的问题?

BUG重现:

a,span{display:block;background:#ddd;}

<ul>
	<li><a href="http://css.doyoe.com/">CSS参考手册</a></li>
	<li><a href="http://blog.doyoe.com/">CSS探索之旅</a></li>
	<li><a href="http://demo.doyoe.com/">web前端实验室</a></li>
	<li><span>测试li内部元素为设置了display:block的内联元素时底部产生空白</span></li>
</ul>

如上代码,IE6及更早浏览器每个li内部的内联元素底部都会产生空白。解决方案是给li内部的内联元素再加上zoom:1

13、如何解决IE6及更早浏览器下未定义宽度的浮动或绝对定位元素会被内部设置了zoom:1的块元素撑开的问题?

BUG重现:

#test{zoom:1;overflow:hidden;border:1px solid #ddd;background:#eee;}
#test h1{float:left;}
#test .nav{float:right;background:#aaa;}
#test .nav ul{zoom:1;overflow:hidden;margin:0;padding:0;list-style:none;}
#test .nav li{float:left;margin:0 5px;}

<div id="test">
	<h1>Doyoe</h1>
	<div class="nav">
		<ul>
			<li><a href="http://css.doyoe.com/">CSS参考手册</a></li>
			<li><a href="http://blog.doyoe.com/">CSS探索之旅</a></li>
			<li><a href="http://demo.doyoe.com/">web前端实验室</a></li>
		</ul>
	</div>
</div>

如上代码,IE6及更早浏览器div.nav会被设置了zoom:1的ul给撑开。

列举几个解决方法:

  • 设置ul为浮动元素;

  • 设置ul为inline元素;

  • 设置ul的width

14、如何解决IE7及更早浏览器下子元素相对定位时父元素overflow属性的auto|hidden失效的问题?

BUG重现:

div{overflow:auto;width:260px;height:80px;border:1px solid #ddd;}
p{position:relative;margin:0;}

<div>
	<p>如果我是相对定位,我的父元素overflow属性设置为auto|hidden将失效。如果你使用的是IE及更早浏览器,你将可以看到这个BUG</p>
	<p>如果我是相对定位,我的父元素overflow属性设置为auto|hidden将失效。如果你使用的是IE及更早浏览器,你将可以看到这个BUG</p>
</div>

如上代码,在IE7及更早浏览器下你会看到div的滚动条将无法工作。解决方案是给div也设置相对定位position:relative

15、如何解决Chrome在应用transition时页面闪动的问题?

方法:

-webkit-transform-style:preserve-3d;或-webkit-backface-visibility:hidden;

在Chrome下,使用过渡效果transition时有时会出现页面闪动


任务

?不会了怎么办
无数据提示暂无评论哟...我要评论
网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号