ime-mode
语法:
ime-mode : auto | active | inactive | disabled
取值:
auto : 默认值。不影响IME的状态。与不指定 ime-mode 属性时相同
active : 指定所有使用IME输入的字符。即激活本地语言输入法。用户仍可以撤销激活IME
inactive : 指定所有不使用IME输入的字符。即激活非本地语言。用户仍可以撤销激活IME
disabled : 完全禁用IME。对于有焦点的控件(如输入框),用户不可以激活IME
每个 Web Developer / Designer 都知道 CSS 的 position:fixed 的妙用。利用这个属性,我们可以轻松的将一个元素“固定”在页面的某个位置。这在我们做一些特殊的效果,例如页边角的小角旗,或是固定页面底下的脚注都是非常有用的。但是万恶的 IE 却对这个属性支持有问题,尽管 IE7/8 已经能够正确处理这个属性,但 IE6 的份额还是很高,所以当我们用这个属性时,还得想办法解决这个问题。
今天在一位德国朋友的博客上,看到了一个不错的通用解决方案。这里我简单介绍,或者说翻译一下作者的方法:
在 Firefox/Opera 等良好支持 W3C 标准的浏览器中,如果我们希望将某个元素固定在页面底部,我们可以给它指派这样的 CSS:
1
2
| position: fixed;
bottom: 0; |
对于 IE7 来说,它虽然可以正确的将这个元素 fix 在底部,但它却错误的处理了水平方向的位置。对于这个问题,我们可以利用一个原有的 hack 来解决:
1
2
| left: 50%;
margin-left: -390px; |
这里 margin-left 的值应该修改为您页面主要区域宽度的一半。这样 IE7 下基本也就完美了。剩下需要解决的就是 IE6, IE5.5 的问题了,他们不懂得 position: fixed 属性,所以我们需要单独解决一下:
首先我们为这些浏览器单独创建一个样式表,我们可以利用条件注释语句,让 IE<7 的浏览器单独载入这个“多于”的样式表:
1
2
3
| <!–[if IE lt 7]>
<link rel=”stylesheet” href=”path/to/stylesheet/ie-stuff.css” type=”text/css” media=”screen” />
<![endif]–> |
然后我们在这个 CSS 文件中,对这个需要固定在页面底部的元素添加 CSS 属性:
1
2
3
| postion: absolute;
bottom: auto;
top: expression( eval(document.compatMode && document.compatMode==’CSS1Compat’) ? documentElement.scrollTop + (documentElement.clientHeight - this.clientHeight) - 1 : document.body.scrollTop + (document.body.clientHeight - this.clientHeight) - 1); |
这里事实上就是利用了 IE 中特有的 CSS 运算符 expression。在 expression 中我们可以利用 Javascript 计算出需要的 top 值,这样就达到了与 position: fixed 同样的效果。
这种方法原理上来说和以前的 Javascript 方案是相同的,但这种方法显然通用性更好一点。当然,如果您不介意用 Javascript 的话,实现同样的效果会更直观更简单一点。
这是晓鹏最近在做单的时候遇到的问题,因为INPUT用到了背景图,所以呢,就要把边框去掉
平时在css中定义一下input 的border:none;就搞定了,这次IE6 IE8 FF3都没问问题了,就在IE7挂掉了,你说让人郁闷不郁闷。。。
经过测试发现,有两种方法解决。
1、定义input的边框和背景色相同,适合纯色背景,具体色值自己改了,我这正好是白色
border:1px solid #fff;
2、就是在原来的none基础上加上0,变为
border:0 none;
记录一下,别望了。说起来这个浏览器兼容性哪天要是不成问题的话多好。。。唉。。。
Tags:
CSS, IE7, INPUT, 边框.
嘿嘿,最近在做一个站,用UL的时候发现在IE8下正常的代码在IE6 IE7 FF3.0.10都下不正常,用UL做纵向的图片菜单,图片下方会有间距,如下代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="author" content="www.lixiaopeng.org" />
<title>无标题文档</title>
<style type="text/css">
body{background:#000;}
img{border:none;}
ul{margin:0;padding:0;list-style-type:none;}
</style>
</head>
<body>
<ul>
<li><img src="http://www.baidu.com/img/baidu_logo.gif" /></li>
<li><img src="http://www.baidu.com/img/baidu_logo.gif" /></li>
<li><img src="http://www.baidu.com/img/baidu_logo.gif" /></li>
</ul>
</body>
</html>
经过晓鹏的尝试只需要定义一下LI中的IMG就可以解决了,加入CSS为
ul li img{vertical-align:top;}
Tags:
CSS, Bug, img, li, UL, 列表.
我们都知道<pre> 标签可定义预格式化的文本,一个常见应用就是用来表示计算机的源代码。被包围在 pre 元素中的文本通常会保留空格和换行符,但不幸的是,当你在<pre>标签里面写代码的时候,如果你没有手动换行,它也会给你保留,而不会动换行。
这时候,你可以使用overflow:auto; (当代码超出容器边界的时候,显示滚动框), 但这个方法也并不适用于所有主流浏览器,一些浏览器会直接截断超出的内容 。
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
出自: Making preformated text wrap in CSS3, Mozilla, Opera and IE
转自:http://parandroid.com/preformated-pre-text-wrap/
Tags:
CSS, FF, ie, Opera, pre, 标签.