agon-css

Posts Tagged ‘css’

Not() Selector排除content counter计数

October 5th, 2013, Posted by: agon   

利用css的content counter【1】自动生成目录编号,可以节省不少排版编序号的时间。但是有一个问题,content counter默认把所有层级里的<ol>都计入编号,如果页面里有些ol里li不希望计入目录编号该怎么办呢(例如代码段里的行号),Not() Selector可以很好的解决这个问题【2】

/*设置content counter*/
.entry ol {
counter-reset: section;
list-style-type: none;
}
 
/*计数所有的li除了class为.codeline的li元素*/
.entry ol li:not(.codeline):before {
/*这里的.codeline可以是元素或者选择器*/
counter-increment: section;
content: counters(section , ".") " ";
}

我用的代码高亮生成的行号每个class名字都不一样(如L0,L1),可以通过改高亮代码js,为每一行增加一个class,然后再not这个class名。

CSS content counters 在ie低版本使css解析错误

October 5th, 2013, Posted by: agon   

用css的content counter【1】来为blog文章自动添加章节,是一件很方便的事情,但ie低版本不支持,不支持也就算了,还把原来正常的侧边栏和菜单栏弄乱了,以下低版本是产生错误的css代码:

	.entry ol li:not(.codeline):before {
	counter-increment: section;
	content: counters(section, ".") " ";
	}

在Stack Overflow发现有人遇到同样的问题,有人给出了解决方法【2】,很简单只需要把上面代码里section和后面的逗号之间加一个空格就行了。

另外如果文章里原先代码有用ol生成的行号,在低版本ie也不会显示,计入下面的css就行了:

	.entry ol {
	*list-style-type: number
	}

其实ie低版本现在应该无视,最多布局完全凌乱时,动动

word-wrap可在firefox自动换行

December 13th, 2009, Posted by: agon   

word-wrap可以自动中断连续的长引文字母,以防止撑破布局,只是这个属性是微软自己发明的,不被css2支持,所以firefox下处理这种问题一直比较烦人,要么是用css

overflow:auto;  /*for firefox*/
word-wrap:break-word;/*for ie*/

通过overflow设置过长字母为滚动或者hidden,要么是用js控制,非常不方便。

因为准备为自己写一个简单一点的主题,发现word-wrap在firefox下面起作用了。一查原来微软也是css的成员,这个属性被添加到了css中,所以IE, Safari, and Firefox(高于 3.1 (Alpha))都支持这个属性了,看示例(来源):

This paragraph has long words thisisaveryverylongwordthatisntreallyoneword and again a longwordwithnospacesinit

This paragraph has long words thisisaveryverylongwordthatisntreallyoneword and again a longwordwithnospacesinit

注意:避免在<pre>内使用,如果你是在
<pre>标签内使用word-wrap属性的,firefox下会不起自动换行作用,用white-space: pre-wrap;

所以,虽然ie同学很恼人,但也是有贡献地。

Page 1 of 11