Question

我已经阅读了很多关于这个问题的问题和答案。

我已经在我的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）中运行良好我个人认为开发人员不应该尝试“解决问题”我觉得它是由Microsoft来使他们的浏览器更兼容/兼容。但对于interum，有人可以帮助我吗？我的代码不正确吗？（添加了空格和换行符）

Answer 1

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

您需要CSS3PIE之类的内容才能使用。

然而，它应该在IE9中有效。

Answer 2

虽然您的速记代码是正确的，但您使用了错误的手写值来获得正确的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问题。从绝对最小样式开始，添加其他样式，直到问题出现。事情可以很糟糕地互动。

Answer 3

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中有这个功能。

Answer 4

尝试将标题更改为：

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

Answer 5

只需在border-radius.htc之前添加斜杠。

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

Answer 6

如果没有meta标签，

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

Answer 7

试试这个：

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

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

Answer 8

我用过这个：

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

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

带阴影的

在IE9中工作正常

CSS - IE中的圆角 - IE9

8 个答案: