border 与三角形

border,无处不在,针对三角形作个备忘。

1. 在设置了 border-style 和正的 border-width 但没设置 border-color 的情况下,border 的颜色是跟随字体颜色来的。
2. background 的覆盖范围是包括 border 的,所以在 border 的颜色是透明时,将显示 background。

紧跟着的图片的页面来源是 JS Bin 上的一个 demo

border 是包成一个矩形的,如下图左上。但单个 border 是如何的呢,可以看下图右上,可以看到对于交接处是采用对分的形式的。由于 background 的作用范围,所以左下图把右 border 设为透明后,显示出黑色的背景来。右下,在把 background 也设为透明后,border 处显示出更下方的内容了。

继续阅读“border 与三角形”

CSS Regions

CSS Regions 的提案很早就有了,前端观察 也在 2011 年的时候就译了 CSS3 Region:基于HTML和CSS3的富页面布局 一文,但我首次听说还是苹果的 WWDC 2013 大会。

CSS Regions 目前依然是草案,变化可能还会很大。从目前的状态来看,和前端观察 2011 年那篇译文的写法已经有了很大的变化了。

CSS Regions 的主要目的是把一段文档进行更加丰富的排版,如分块、分栏和中有间隔等。

常规的分块展示内容看不出为何需要新工具。但如果需要对一段内容进行如下图那样的布局的话,问题就来了。需要计算每块能容乃的字数有多少,然后截字输出到对应模块。但还是存在着问题,对于现在的响应式布局又该如何动态调整?遇到图片呢?

继续阅读“CSS Regions”

解除Chrome字体最小12px的限制

Chrome 限制了最小字体是 12px,虽然一般情况下,比这还小的字体将会无法清晰查看,但非得设时,可以使用以下代码来解除限制。

1
html{-webkit-text-size-adjust:none;}

学自 chrome下最小12px字体的解决方法

P.S. airyland 提醒:不建议用这个属性来支持小字体,这样会使页面缩放时其他元素缩放了,而字体还是一样大小。

P.S. 非要用的时候,把选择符精确定位至小于 12px 的元素上,不用 html,减少影响范围。

2013/06/26

Chrome 里可以设置字体大小的下限,默认是 12,最小可以去到 6,最大可以去到 24,但问题是,不可能要求浏览者修改浏览器的设置。所以最好的方法还是:尽可能不要设计小于 12 的字,如果有,那应是不可变的(这样可用图片)。

Chrome 27 后取消了上面的技巧,所以非得要做的话可以用 -webkit-transform{scale(0.85) translate(-1px, 1px)} 这样的方式。scale 来做缩放,缩放产生了位移,再加上 translate 来平移调整。

innerHTML设置样式在IE下的问题

使用 innerHTML 设置内容时,如果内含 style 样式,在 IE7 及以下可能会发现样式没生效。

解决方法:把 <style> 样式放到待设置的 html 内容的最后。

所使用的代码片段是:

1
2
3
var str1 = '<style>#con{color:red;}</style><p>红字</p>',
    str2 = '<p>二:<style>#con{color:green;}</style>绿字</p>',
    str3 = '<p>蓝字</p><style>#con{color:blue;}</style>';

Submit 按钮在低版本 IE 下的黑边框

对于下面这段代码,当 focus 表单(如输入框)时,提交按钮在 IE 6/7 中将会出现一个黑色边框。

1
2
3
4
5
6
7
8
<style>
input{border:1px solid red;}
</style>

<form>
    <input type="text" value="" />
    <input type="submit" value="submit" />
</form>

如果需要对按钮做美化,保持各浏览器一致(比如设定背景和border等),那么需要处理这个问题。

解决方法是:把 submit 按钮的 border 设为 none,然后如果需要 border,那么采用在其外面包一层元素的方法来实现。

text-overflow

text-overflow:ellipsis 配合 overflow:hidden 可以用来实现字符串截断显示为更多的效果,而不用精确截字输出。

text-overflow 的基本单值用法就连 IE6 都支持,所以是可以放心使用的。

默认值是 clip,即简单地分割,可能会导致字符显示一半; 而 ellipsis 可以截字然后补上 ,效果更好。

1
2
3
4
5
6
7
8
9
10
11
12
13
<style type="text/css" media="screen">
    #inner{border:1px solid #ccc;}
    #inner p{width:200px; white-space:nowrap; overflow:hidden;}
    #inner p.t1{text-overflow:clip;}
    #inner p.t2{text-overflow:ellipsis;}
</style>

<div id="inner">
    <p class="t1">text-overflow:clip  more text here</p>
    <p class="t2">text-overflow:ellipsis more text here</p>
    <p class="t1">text-overflow:clip  中文测试跟多更多</p>
    <p class="t2">text-overflow:ellipsis 中文测试更多更多</p>
</div>

结果如下:

text-overflow:clip more text here

text-overflow:ellipsis more text here

text-overflow:clip 中文测试跟多更多

text-overflow:ellipsis 中文测试更多更多

ie6样式中多class的bug

IE6 有个多个 class 样式的 bug,具体表现为:当为一个元素连用 2 个及以上的 class 来匹配样式时(如:p.a.b),ie6 会识别为样式规则中最后一个 class 的定义(即:p.b)。

这样一来,不但多 class 的样式不正确,还可能会覆盖掉原对应 class 的样式(如 .b 的样式)。

下面截图最后一行有误,class 应为 “a c”

ie6 multiple class bug

上面截图最后一行有误,class 应为 “a c”

Demo 页面

input file 在不同浏览器中的呈现

文件选择(input type=”file”)是一个常用的元素(虽然我比较少用),在浏览器中的表现是没有完全一致的。以下是其在 IE/Firefox/Chrome/Opera 四种浏览器中的一些异同(Safari 和 Chrome 同是基于 Webkit,故不再详说)。

对于文件选择元素,可以分为2部分,一部分是按钮,一部分是文字展示,如图1:

图1:input file 的组成

下面图2~图5是4个浏览器对于3个不同状态下的文件选择元素的呈现:

其中:第一个是默认状态下选择了一个文件;第二个是设定了 300px 的宽度;第三个设定了 50px 的宽度;

继续阅读“input file 在不同浏览器中的呈现”