Drupal:CSS3 的所有内容都不能在 IE 上运行吗?特别是谷歌网络字体。这段代码正确吗?
我目前正在 www.liganet.net 上工作,它在 Chrome 和 Firefox 中看起来不错。 但用任何 Internet Explorer 版本来看……圆角消失了,一切看起来都很糟糕。特别是 Google Webfonts。 我已经安装了 Drupal 模块“Google Fonts”,这样我就可以更轻松地使用 Google 字体。 但我认为这个问题与Drupal无关。
这是应该以 webfonts 格式显示页面标题的代码:
.logo-1 {font-family:delius; font-size:18pt; margin-top:-35px;}
.logo-2 {font-family:chewy; font-size:44pt; margin-top:-25px; color:#133793;}
.logo-3 {font-family:delius; font-size:19pt; margin-top:-26px; text-align:right;}
因此这三个链接应该定义标题显示的方式。 IE 不会显示谷歌字体。
这里有一些根本不会显示的圆形边框、阴影和丝带!
border: 1px solid #6487DC;
*border-top: 1px solid #6487DC;
*border-bottom: 1px solid #6487DC;
-moz-border-radius: 10px 10px 10px 10px; /* FF1+ */
-webkit-border-radius: 10px 10px 10px 10px; /* Saf3+, Chrome */
border-radius: 10px 10px 10px 10px; /* Opera 10.5, IE 9 */
-moz-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
-webkit-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
-o-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
box-shadow:2px 2px 0 rgba(0,0,0,0.1);
我已经检查所有代码都应该在 IE 中运行,也许我忘记了什么? 我真的很感激对此的一些帮助或指导。 谢谢! 罗莎蒙达
更新:
感谢您的回答! 我试图理解这些错误,特别是与网络字体相关的错误。 您好心告诉我的网站 http://jigsaw.w3.org 告诉我代码应该说:
@font-face {
font-family : "'Abel'";
font-style : normal;
font-weight : normal;
src : local('Abel'), local('Abel-Regular'), url('http://themes.googleusercontent.com/static/fonts/abel/v1/N59kklKPso9WzbZH9jwJSg.ttf') format('truetype');
}
但是在我的 .css 文件中更改它之后,它就不起作用了。 许多错误属于工作正常的 Drupal 模块,而与 webfonts 相关的错误应该通过添加到文件中的这些行来修复。
但它不会工作...
I´m currently working on www.liganet.net, and it looks ok in Chrome and Firefox.
But look at it with ANY Internet Explorer version... the rounded corners go away, everything looks bad. Specially the Google Webfonts.
I´ve installed the Drupal module "Google Fonts" so I can use Google fonts easier.
But I think that the problem has nothing to do with Drupal.
This is the code that should show the page title with the webfonts format:
.logo-1 {font-family:delius; font-size:18pt; margin-top:-35px;}
.logo-2 {font-family:chewy; font-size:44pt; margin-top:-25px; color:#133793;}
.logo-3 {font-family:delius; font-size:19pt; margin-top:-26px; text-align:right;}
So those three linkes should define the way that the title shows up. IE won´t show the google font.
And here are some rounded borders, shadows and ribbons that won´t show up at all!
border: 1px solid #6487DC;
*border-top: 1px solid #6487DC;
*border-bottom: 1px solid #6487DC;
-moz-border-radius: 10px 10px 10px 10px; /* FF1+ */
-webkit-border-radius: 10px 10px 10px 10px; /* Saf3+, Chrome */
border-radius: 10px 10px 10px 10px; /* Opera 10.5, IE 9 */
-moz-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
-webkit-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
-o-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
box-shadow:2px 2px 0 rgba(0,0,0,0.1);
I´ve checked out that all that code should work in IE, maybe I´m forgetting something?
I would really appreciate some help or guidance about this.
THANKS!
Rosamunda
UPDATE:
Thanks for your answer!
I´ve tried to understand the errors, specially the ones related to the webfonts.
The site that you´ve kindly told me http://jigsaw.w3.org, tells me that the code should say:
@font-face {
font-family : "'Abel'";
font-style : normal;
font-weight : normal;
src : local('Abel'), local('Abel-Regular'), url('http://themes.googleusercontent.com/static/fonts/abel/v1/N59kklKPso9WzbZH9jwJSg.ttf') format('truetype');
}
But after changing that in my .css file it won´t work.
Many of the errors are belonging to Drupal modules that work just fine, and the ones related to webfonts, should get fixed with those lines added to the file.
But it won´t work...
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
经过大量尝试和错误后,我发现(非常惊讶)问题出在 Google Fonts 模块本身。
是的。我已将其卸载,然后转到 http://www.google.com/webfonts,选择我想使用的字体,并快速复制/粘贴了谷歌给我的单行代码。
仅供参考,就是这一行:
我将其放入
page.tpl.php
的中,瞧!
不仅是字体,其他一切都正常(其他 CSS3 东西到目前为止看起来确实很糟糕:)
不管怎样,我只是想发布解决方案,以防万一其他人遇到这个问题。
After a lot of trying and error, I´ve found (pretty much astonished) that the problem was the Google Fonts module itself.
Yes. I´ve uninstalled it, and went to http://www.google.com/webfonts, selected the fonts I wanted to use and did a quick copy/paste of the single line of code that Google gave me.
FYI, it was this line:
I put that inside the
<head>
ofpage.tpl.php
and voilá!Not only the fonts, but everything else is working (the other CSS3 stuff that did look horrible up until now :)
Anyway, I just wanted to post the solution, just in case anyone else bumps into this problem.