CSS - IE 中的圆角 - IE9

发布于 2024-11-18 20:09:45 字数 2021 浏览 0 评论 0原文

我读了很多关于这个问题的问题、答案和建议。

我已在 HTML 和 CSS 中使用编码来尝试消除任何问题，但 IE8 和 IE9 仍然无法正确显示页面（带有圆角）。它也不显示阴影文本（但这是另一个问题。

我的标题代码：

<!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="X-UA-Compatible" content="IE=9" />
    <!--< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />-->
    <link href="css/ts_style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="javascript/date.js">
    <script language="JavaScript" type="text/javascript">

注意，第二个元标记被引用，因为建议使用较新的元标记（第一个元标记），我也必须添加空格和换行符以显示所有信息并在单独的行上显示

我的 CSS 代码：

border-radius-topleft:0px; /* top left corner */
border-radius-topright:10px; /* top right corner */
border-radius-bottomleft:0px; /* bottom left corner */
border-radius-bottomright:10px; /* bottom right corner */
border-radius:0px 10px 10px 0px; /* shorthand topleft topright bottomright bottomleft */

/* firefox's individual border radius properties */
-moz-border-radius-topleft:0px; /* top left corner */
-moz-border-radius-topright:10px; /* top right corner */
-moz-border-radius-bottomleft:0px; /* bottom left corner */
-moz-border-radius-bottomright:10px; /* bottom right corner */
-moz-border-radius:0px 10px 10px 0px; /* shorthand topleft topright bottomright bottomleft */

behavior:url(border-radius.htc);

/* webkit's individual border radius properties */
-webkit-border-top-left-radius:0px; /* top left corner */
-webkit-border-top-right-radius:10px; /* top right corner */
-webkit-border-bottom-left-radius:0px; /* bottom left corner */
-webkit-border-bottom-right-radius:10px; /* bottom right corner */

所有这些都在 Firefox 5、Opera 11.5、Chrome 12.0.742.112、Safari 5.0.5 中运行良好。 (7533.21.1) 我个人不认为开发人员应该尝试“解决问题”，我认为微软应该让他们的浏览器更加兼容/合规，但是对于中间，有人可以帮助我吗？我的代码不正确吗？（添加了空格和换行符）

原文

I have read a great deal of questions, answers, advise with regards to this issue.

I have used coding both in my HTML and CSS to try to eliminate any problems but IE8 AND IE9 still do not display the page correctly (with the rounded corners). It also doesnt display shadow text (but that is yet another issue.

My Header Code:

<!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="X-UA-Compatible" content="IE=9" />
    <!--< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />-->
    <link href="css/ts_style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="javascript/date.js">
    <script language="JavaScript" type="text/javascript">

Note, the second Meta Tag is quoted out as on piece of advice was to use the newer one (the first one) also I have had to add spaces and line breaks to display ALL information and on seperate lines.

My CSS Code:

border-radius-topleft:0px; /* top left corner */
border-radius-topright:10px; /* top right corner */
border-radius-bottomleft:0px; /* bottom left corner */
border-radius-bottomright:10px; /* bottom right corner */
border-radius:0px 10px 10px 0px; /* shorthand topleft topright bottomright bottomleft */

/* firefox's individual border radius properties */
-moz-border-radius-topleft:0px; /* top left corner */
-moz-border-radius-topright:10px; /* top right corner */
-moz-border-radius-bottomleft:0px; /* bottom left corner */
-moz-border-radius-bottomright:10px; /* bottom right corner */
-moz-border-radius:0px 10px 10px 0px; /* shorthand topleft topright bottomright bottomleft */

behavior:url(border-radius.htc);

/* webkit's individual border radius properties */
-webkit-border-top-left-radius:0px; /* top left corner */
-webkit-border-top-right-radius:10px; /* top right corner */
-webkit-border-bottom-left-radius:0px; /* bottom left corner */
-webkit-border-bottom-right-radius:10px; /* bottom right corner */

All of this works well in Firefox 5, Opera 11.5, Chrome 12.0.742.112, Safari 5.0.5 (7533.21.1) I personally do not feel it is up to developers to try and "fix the problem" I feel it is up to Microsoft to make their browser more compatibly/compliant. but for the interum, can someone help me out? Is my code incorrect? (Spaces and linebreaks added)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

握住你手 2024-11-25 20:09:45

IE6-8不支持CSS3。完全没有。

你需要像 CSS3PIE 这样的东西才能工作。

不过，它应该可以在 IE9 中运行。

回复收藏 0 原文

尐偏执 2024-11-25 20:09:45

虽然您的简写代码是正确的，但您使用了正确的 CSS3 的不正确的普通值。它不应该是“border-radius-bottomright”，而是“border-bottom-right-radius”。 Mozilla 对此有一个不正确的命名约定。 Webkit 是正确的版本。

另外，请务必将供应商特定版本放在标准版本之前。

您可能想使用在线工具来生成它们，例如 http://border-radius.com/

编辑：首先消除所有不相关的东西（我的意思是所有东西），然后将它们一一添加回去，直到你看到哪里出了问题：

<!doctype html>
<body>
    <div style="border: 1px solid black; border-radius: 10px; padding: 1em;">
        Rounded corners
    </div>
</body>

下一步将是这样的：

<!doctype html>
<style type="text/css">
div#test { border: 1px solid black; border-radius: 10px; padding: 1em; }
</style>
<body>
    <div id="test">
        Rounded corners
    </div>
</body>

等等。这绝对是代码中的一个错误你没有发布。

另一个编辑：它是由 filter:progid:DXImageTransform.Microsoft.gradient(...); 引起的，它对整个元素进行操作，忽略圆角。删除过滤器声明，并且不使用渐变背景或使用图像（如果您想要有适当的渐变，则使用 SVG，否则使用 PNG），您将看到圆角。

这个故事的寓意是：如果你遇到像这样奇怪的 CSS 问题，请务必消除其他所有内容。从绝对最小的样式开始，然后添加其他样式，直到问题出现为止。事物之间的相互作用可能会很糟糕。

While your shorthand codes are correct, you're using the incorrect longhand values for proper CSS3. It should not be "border-radius-bottomright", but "border-bottom-right-radius". Mozilla has had an incorrect naming convention for this. The Webkit one is the correct version.

Also, be sure to place your vendor-specific versions before the standards versions.

You might like to use an online tool to generate them, such as http://border-radius.com/

Edit: Start by eliminating absolutely everything (and I do mean EVERYTHING) that is unrelated and add them back in one by one until you see where things go wrong:

<!doctype html>
<body>
    <div style="border: 1px solid black; border-radius: 10px; padding: 1em;">
        Rounded corners
    </div>
</body>

Next step would be something like:

<!doctype html>
<style type="text/css">
div#test { border: 1px solid black; border-radius: 10px; padding: 1em; }
</style>
<body>
    <div id="test">
        Rounded corners
    </div>
</body>

etc. It's definitely a bug in the code that you haven't posted.

Yet another edit: It's caused by the filter:progid:DXImageTransform.Microsoft.gradient(...);, which operates on the entire element, ignoring the rounded corners. Remove the filter declaration and either don't have a gradient background or use an image (SVG if you want to have proper gradients, PNG otherwise) and you'll see rounded corners.

Moral of the story: always eliminate everything else, in case you have a strange CSS issue like this. Start with the absolute minimum styles and add in the other ones until the issue manifests itself. Things can interact badly.

回复收藏 0 原文

挽袖吟 2024-11-25 20:09:45

Internet Explorer 直到 IE9 才支持 border-radius。在 IE9 中，您可以使用更圆的边缘，重要的步骤是使用边缘 META 标记并提供边框半径：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
border-top-right-radius: 7px;
border-top-left-radius: 7px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
</style>

编辑

根据 MSDN, { border-radius : sRadius } 应该可以正常工作。他们告诉我们 IE9 中就有这个功能。

Internet Explorer did not support border-radius until IE9. In IE9 you can use rounder edges , the important steps is to use the edge META tag and provide the border radius:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
border-top-right-radius: 7px;
border-top-left-radius: 7px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
</style>

EDIT

According to MSDN, { border-radius : sRadius } should work properly. And they have told that the feature is there in IE9.

回复收藏 0 原文

灯角 2024-11-25 20:09:45

尝试将标题更改为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Try changing your header to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

回复收藏 0 原文

七七 2024-11-25 20:09:45

如果没有元标记，圆角在 ie9 中不起作用。奇怪的是，直到现在微软仍然相信他们可以属于自己的世界

回复收藏 0 原文

青巷忧颜 2024-11-25 20:09:45

我使用了这个：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

行为 border-radius.htc 和 border-radius: 10px;

有阴影，在 IE9 中工作正常

i used this:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

the behavior border-radius.htc and border-radius: 10px;

with shadows, works fine in IE9

回复收藏 0 原文

执妄 2024-11-25 20:09:45

试试这个：

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;

border---radius 不起作用...

回复收藏 0 原文

も让我眼熟你 2024-11-25 20:09:45

只需在 border-radius.htc 之前添加一个斜杠即可。

behavior: 中的 url 路径相对于调用 css 文件的页面。
这应该有效。

回复收藏 0 原文

~没有更多了~

关于作者

时光暖心i

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

CSS - IE 中的圆角 - IE9

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（8）

关于作者

相关话题

热门标签

推荐作者

浪漫人生路

620vip

羞稚

走过海棠暮

你好刘可爱

陌若浮生

友情链接

CSS - IE 中的圆角 - IE9

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（8）

关于作者

相关话题

热门标签

推荐作者

浪漫人生路

620vip

羞稚

走过海棠暮

你好刘可爱

陌若浮生

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。