CSS Mastery2（9.5常见BUG&fixed/9.6分级浏览器支持/10Roma Italia实例【10.1-10.4】）

来源：互联网发布：个性化商品推荐算法编辑：程序博客网时间：2024/05/22 02:27

9.5常见BUG及其修复方法：
1.双外边距浮动BUG：
a)solution：当对具有水平外边距的元素进行浮动时，将display属性设置为inline，以防外边距被加大。
2.3像素文本偏移BUG:

a)solution:

/*1.迫使元素拥有布局。2.解决浮动元素的3px间隙（原偏移实质：非浮动元素，如p）*/p{height: 1%;margin-left: 0;}.myFloat{margin-right: -3px;}

b)如果浮动元素是图像：

/*IE 5.x*/p{height: 1%;margin-left: 0;}img.myFloat{margin: 0 -3px;}/*IE 6*/p{height: 1%;margin-left: 0;}img.myFloat{margin: 0;}

3.IE6重复字符BUG：

a)what：一系列浮动元素的最后一个元素中的最后几个字符会在浮动元素下面重复出现。
b)when：当在一系列浮动元素的第一个和最后一个元素之间有多个注释时，会出现这个BUG。
①前两个注释无影响，后续的每个注释会导致两个字符重复出现。picture:
c)solution：最容易、安全的方法，从HTML中删除多余的注释，或压缩至两个comments以下。

4.IE6 “藏猫猫”BUG：

a)what：某些条件下文本看上去消失了，只有在重新加载页面时才会重新出现。
b)when：如果清理元素碰到了浮动元素，中间的非浮动元素看起来像消失了，实际上是隐藏于父元素的背景颜色或图像之下，只有刷新页面时才会重新出现。
c)solution：
①去掉父元素的背景颜色或图像。
②为了防止清理元素与浮动元素接触，将容器里的元素应用特定的尺寸。
③为容器设定行高。
④浮动元素和容器元素的position设置为relative。

5.相对容器中的绝对定位：

a)why：相对定位元素没有获得IE/WIN内部的hasLayout属性。
b)result in：如果不创建新的定位，上下文所有绝对定位元素会相对于视口进行定位。
c)solution：
①显式设置width和height，使相对定位容器拥有布局。【不灵活】
②条件注释过滤IE5&IE6，为容器增强height=1%

9.6分级浏览器支持【具体站点】：
a)function：根据具体站点来决定支持的实际意义。
b)content：多级支持而非true&false
c)distinction：现代浏览器上显示完整的设计/老版本浏览器上只显示内容
d)way：
①确定一组浏览器，确保站点在这些浏览器上变现一致。
②确定一组已过时但仍较为重要的浏览器（尝试修复找到的BUG）
③确定一组完全过时、你不想支持的浏览器，保证内容和基本功能的实现。

第十章Roma Italia【实例】
1.许多东西没有变，标记仍是标记，标准仍是标准。
2.goal：
①1080布局&网格（layout&grid）。
②高级CSS2和CSS3的特性。
③字体链接&更好的Web排版。
④Ajax&jQuery增加交互。
3.foundation:（meaningful&light-weight）
①meaningful：令HTML元素和选择器的名称能以合适的方式表示内容，让内容的层次和结构在去掉样式的情况下仍有意义。
②抛弃“表现性信息”：
如：<p class="arial red 10>，万一下次更新换种字体、颜色、字体大小咋办？
③light-weight：各种标记（HTML元素、属性、属性值，CSS选择器、属性、属性值）能简化就简化。
如：
background-color:#fff;
background-image:url(images/1.png);
background-repeat:no-repeat;
→background:#fff url(images/1.png) no-repeat;
④着眼于HTML5：
a)原来用div元素配上class&id包裹的区域，都直接用该元素标记
如：<div id="nav">→<nav>
⑤reset.css（coverage）：
a)将具有相同特征的样式的css聚集在一个文件中。

4.1080 layout
a)960理想值，能被2,3,4,5,6,8,10,12,15,16整除。
b)尝试1080，能被2,3,4,5,6,8,9,10,12,15整除。
c)grid:
①function:大体定位元素。【精确的定位仍需设计者自己的判断】
②真正的网格应提供无数探索的可能。

5.高级CSS2和CSS3的特性。
a)
①新特性：Min-width/Max-width/Attribute selector/Adjacent sibling selector（相邻同胞选择器）/Child selector/alpha（透明度）
②Dowebsitesneedtolookexactlythesameineverybrowser.com
③只要不对总体用户体验产生负面影响，在不同浏览器之间提供略有不同的用户体验是完全合理的。
b)Attribute selector
①不再依靠class或ID来引用，而可以通过元素中包含的属性或属性值。
②Best useful place:form（表单）
如：input[type="text"]{...}
c)Box-Shadow/RGBa/Text-overflow
①RGBa不透明度和opacity的区别？
1.前者真能影响特定的属性（如：背景）（Just one）
2.opacity应用它的元素中的所有东西（如：背景、文字等）

②white-space:nowrap;段落中的文本不换行。

Result:

Code:

<!doctype html><html><head><title></title><meta charset='utf-8'><link rel="stylesheet" type="text/css" href=""><style type="text/css">/*body{background-color: #f1efe8;}form input[type="text"]{display: block;background: url(images/search-bg.gif) no-repeat;position: relative;}form input[type="image"]{float:left;}*//*1.将该div元素设置为浮动元素（向左浮动）。2.设置上、左外边距均为8em(上右下左)。3.设置容器的宽度为310px。*/#voices {float: left;margin: 8em 0 0 8em;width: 310px;}/*1.将ul元素设置为浮动元素，其包含（li,a,em）2.显式设置宽和高度。3.设置背景图片。*/#voices ul{position: relative;width:310px;height: 178px;background: url(images/bg-map.gif) no-repeat;}/*1.将l1设置为绝对定位元素，相对于相对定位元素ul。2.object:文本框+mapmarker。3.mapmarker是个背景图像。4.整个其实是:文本框和mapmarker的组合。*/#voices ul li.l1{position: absolute;padding-top: 16px;background: url(images/mapmarker-dot.png) no-repeat 2px top;list-style: none;}/*1.object:文本框里的本文（加个锚元素）。2.设置基本样式。3.加个box-shadoe,rgba(red,green,blue,透明度)。4.为什么不把box-shadow,rgba()设置在#voices ul li.l1中？①因为.l1中的对象是文本框+mapmarker背景图像。②预期的样式：文本框拥有box-shodow。5.再给背景来点透明度。6.去掉文本下划线。*/#voices ul li.l1 a{display: block;padding-left: 11px;font:11px Georgia,serif;color:#32312a;-webkit-box-shadow:0 2px 3px rgba(0,0,0,0.35);-moz-box-shadow:0 2px 3px rgba(0,0,0,0.35);background-color: rgba(255,255,255,0.66);text-decoration: none;}/*1.object：文本。2.设置内边距，元素高度，文本缩进。*/#voices ul li.l1 a em {display: block;padding: 7px 8px 3px 2px;height: 16px;text-indent: -.3em;}/*1.whitw-space:文本不会换行，文本会在在同一行上继续，直到遇到换行标记。;2.设置文本框的长度。3.overflow:hidden;隐藏剩余文本。4.剩余文本显示为省略号(ellipsis)。*/#voices ul li.l1 a em{white-space:nowrap;width: 135px;overflow: hidden;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;-moz-text-overflow:ellipsis;-o-text-overflow:ellipsis;}/*1.white-space设置normal，当鼠标悬至文本框时，显示全部文本。2.cursor:hand（IE）/cursor:pointer(CSS2.0标准)：hack,为了在不同浏览器中实现相同的样式，设置不同的CSS。3.设置:hover之后的文本高度。4.设置基本样式：背景，内外边距。*/#voices ul li.l1 a em:hover{white-space: normal;overflow: visible;text-overflow:inherit;-o-text-overflow:inherit;cursor: hand;cursor: pointer;background: #fff none;height: 72px;padding-left: 11px;padding-bottom: 5px;margin-left: -9px;}</style></head><body><!--<form action="#" method="get" accept-charset="utf-8"> <fieldset><legend></legend><label for="search-input">Search</label><input type="text" id="search" name="search" value="" title="Serach"><input type="image" id="image" name="image" src="images/search-go.gif"></fieldset></form>--><div id="voices"><ul><li class="l1" id="map2" style="top: 61px; left: 53px;"><a href="#"><em>“Absolutely divine. Don’t skip the Il Vittoriano. Its size alone is impressive. There’s a stunning view from the top.”</em></a></li></ul></div></body></html>

The distinction of RGBa and opacity:

该图片from:http://www.w3cplus.com/content/css3-rgba

阅读全文

0 0