长时间写AS代码之后，养成良好习惯，每行代码结束随手输入”;”,无意中在在整CSS时也顺便在”}”之后敲了个”;”,变态是整个CSS文件也仅仅只是多敲了这么一个.于是乎在firefox,chorm,opera测试页面时无论如何也不能和IE一致。经过一番…… (全文…)
Posts Tagged ‘css’
又一个可用的CSS HACK
星期三, 四月 8th, 2009关于CSS3
星期五, 三月 7th, 2008在微软向W3C靠扰的时候,以及IE8的出现,我想以后IE的更新速度一定会加快.对于CSS3的支持也是迟早的事.而火狐(FF)在中国网络上的的广告攻势也不能小视.部份CSS3的特性,FF已经支持了,像圆角之特别有用的新特性.<br/>
从网上收集的资料看,大至上有以下一些特性,我们可以用Firefox, Konqueror, Opera or Safari/Webkit.去看看效果.<br/><br/>
<ul>
<li>边框(border-color,border-image ,border-radius ,box-shadow )</li>
<li>背景(background-origin,background-clip,background-size,multiple backgrounds)</li>
<li>颜色(HSL colors ,HSLA colors ,opacity ,RGBA colors )</li>
<li>文本特效Text effects(text-shadow,text-overflow,word-wrap)</li>
<li>界面(box-sizing,resize outline )</li>
<li>选择器Selectors</li>
<li>其它(media queries,multi-column layout,,speech)</li>
<li>继续……</li>
</ul>
CSS3的特性在(FF)以及webkit等其它浏览器都不是以标准的语法去表示,<br/>
FireFox则会在标准语法加(-moz-)，webkit则加(-webkit-).<br/>
IE中z-index层叠失效
星期一, 三月 3rd, 2008最近在制作HTML页面,很多两列的地方需要一侧因定宽度,另一侧自适应宽度.当需要一个下拉菜单效果时,无论把z-index的值设为多高,菜单的DIV始终不在页面最顶层.
HTML
<div class="a">
a <div class="menu">sub a</div>
</div>
<div class="b">
b
</div>
CSS
.a {
position:relative;
background:#f00;
}
.menu{
position:absolute;
background:#0ff;
height:50px;
z-index:99;
}
.b {
position:relative;
background:#ff0;
}
以上是页面代码,menu的z-index已设为99,但在IE6,IE7中DIV[menu]始终在div的下面.只能通加设置div[a]的z-index的值来提升级div[menu]层叠高度,但在火狐中无需设置.可以看出IE对层叠顺序的继承性比火孤要严格的多.但本人觉火孤的方式接近设计者的意图.虽然对IE和火狐对CSS不同解析深恶痛绝,也只能感到无奈.
Expression在css中最简单的应用（隔行换色）
星期四, 三月 15th, 2007IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和javascript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段javascript表达式，CSS属性的值等于javascript表达式计算的结果。
在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。
例：简单实现隔行换色。
tr {
background-color: expression(this.sectionRowIndex==0?"#FF0000":((this.sectionRowIndex%2==0) ? "#F7F7F7" : "#FFFFFF"));
}
#FF0000是设定表格第一行背景颜色。
#F7F7F7与#FFFFFF是后续几行隔行换色。
常用CSS缩写语法总结
星期二, 三月 13th, 2007使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：
颜色
16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：
#000000可以缩写为#000;#336699可以缩写为#369;
盒尺寸
通常有下面四种书写方法:
property:value1; 表示所有边都是一个值value1；
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left
方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：
margin:1em 0 2em 0.5em;
边框(border)
边框的属性如下：
border-width:1px;
border-style:solid;
border-color:#000;
可以缩写为一句：border:1px solid #000;
语法是border:width style color;
背景(Backgrounds)
背景的属性如下：
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;
语法是background:color image repeat attachment position;
你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
字体(fonts)
字体的属性如下：
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。
列表(lists)
取消默认的圆点和序号可以这样写list-style:none;,
list的属性如下:
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
可以缩写为一句：list-style:square inside url(image.gif);
网页HTML默认的CSS样式表属性总结
星期一, 三月 5th, 2007除了inline和block的定义，主要是要注意 body|h1~h6|blockquote|menu|ul|ol|dd等标签的默认样式（margin和font-size）。
不过不同浏览器的默认值是不一样的.
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block }
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell; }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { margin: 8px; line-height: 1.12 }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address { font-style: italic }
pre, tt, code,
kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea,
input, object,
select { display:inline-block; }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle }
td, th { vertical-align: inherit }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir,
menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "A" }
:before, :after { white-space: pre-line }
center { text-align: center }
abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
@media print {
h1 { page-break-before: always }
h1, h2, h3,
h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
ie6.0对css支持不足例举
星期四, 一月 11th, 2007在用IE中用CSS布局会出现各种问题.
本人习惯把body当然最外层的div来用.然后所有的div都float:left;进行布局,结要在此时给body设背影图片时,会出现无法解释的定位问题.特别是需要制作左边固定宽度,右边是随窗口变化的那种页面.
第二种情况,在设置:body{width:750px;margin:0px auto}这种方式合页面居中后.
<div class="layout">
<div class="left"></div>
<div class="right"></div>
</div>
设置样式表:
.layout{padding-left:200px;}
.left{margin-left:-200px;position:absolute;float:left;}
.right{}
这样设置方式可实现虽然意义不大.但IE在这种情况会一个问题.
在窗口变化后.left的div的定位总有所有不对,好像是针对body定位一样.
第三种
当把ul也当做div用,也就是ul也成了布局元素(本人习惯想少写一些代码,希望文件小点,这种想法虽然有些变态,但也是一种尝试).在IE会出会现一个很有意的问题,就是ul里的最后一个li的几个文字会重复出现在ul外面.却不影响后续布局.这种情况会一递传.在FF中却没有种情况.