0

我正在尝试为自己创建一个设计博客和画廊,这就是我对 CSS3 进行一些实验的原因。我在其他浏览器上实现了我想要的结果,现在 IE 让我很头疼。

我使用 CSS 为我的博客文章创建了旋转日期标记,如下所示:

.metadata {
margin-left: -108px;
margin-top: 140px;
width: 140px;
position: absolute;
text-align: right;
} 

.postdate {
display: block;
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
font-size: 70px;
color: #ffffff;
}

好吧,我是怎么做到的可能并不那么重要。无论如何:我也尝试在 IE 中旋转文本,并且我设法使用特定于 IE 的代码来做到这一点,但是呈现的结果实在是太糟糕了,以至于我不想使用它。现在,如果没有旋转代码等,日期标记自然离它们在 IE 中的位置很远。

我希望使用条件 CSS 为 IE 中的日期标记创建一个完全不同的外观,但我不确定如何,这是我第一次尝试这样的事情。

<!--[if IE ]>
<link rel="stylesheet" href="iecss.css"  type="text/css" media="screen">
<![endif]-->

在那个 iecss 文件中,我包含了相同的 CSS 类,但规则略有不同:起初我只尝试将字体大小降低 50 像素。我的电脑上只有 IE 8,它在那里完全没有效果。我使用 IE NetRenderer 预览了我的网站,这暗示文本大小的更改在 IE 7 中确实有效(嗯,实际上在 IE 6 中也是如此,但我不愿意谈论设计中发生的其他事情)。

那么为什么它在 IE 8 和(根据 NetRenderer)IE 9 中没有做任何事情呢?我也尝试使用 [if gte IE 8] 但它也没有做任何事情。

问题是当 IE 理解主 CSS 文件中的规则并且可以正常显示结果时,它不能用相同类的新 CSS 规则覆盖效果?

有没有办法让所有版本的 IE 完全忽略这些 CSS 规则并遵循其他规则(这会使 IE 中的日期标记看起来完全不同)?或者,有没有办法告诉 IE 根本不显示日期标记?由于我的网站刚开始只是相当实验性的,所以不在 IE 中显示发布日期也没什么大不了的。PHP 可以为我做后者吗?

4

1 回答 1

0

对于 IE 9 支持添加:

-ms-transform: rotate(-90deg);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

对于 IE 8 及更低版本,请添加:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

数字 3 表示 -90 (270) 度,0 表示 0 度,1 表示 90 度,2 表示 180 度。

链接:http:
//jsfiddle.net/Eqkjh/2/
http://css-tricks.com/snippets/css/text-rotation/

于 2012-08-16T17:12:49.993 回答