CSS - IE 中的圆角 - IE9
[英]CSS - Rounded corners in IE - IE9
问题描述
我已经阅读了很多关于这个问题的问题、答案和建议。
我在 HTML 和 CSS 中都使用了编码来尝试消除任何问题，但 IE8 和 IE9 仍然无法正确显示页面（带有圆角）。 它也不显示阴影文本（但这是另一个问题。
我的 Header 代码：
<!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) 中运行良好微软使他们的浏览器更兼容/兼容。 但是对于中间人，有人可以帮助我吗？ 我的代码不正确吗？ （添加了空格和换行符）
8 个解决方案
解决方案1
4 2011-07-08 10:00:34
解决方案2
4 2011-07-08 10:04:25
虽然您的速记代码是正确的，但您使用了正确的 CSS3 的不正确的速记值。 它不应该是“border-radius-bottomright”，而是“border-bottom-right-radius”。 Mozilla 对此有一个不正确的命名约定。 Webkit 一是正确的版本。
此外，请务必将您的供应商特定版本放在标准版本之前。
您可能想使用在线工具来生成它们，例如http://border-radius.com/
编辑：首先消除所有无关的东西（我的意思是所有东西），然后将它们一一添加，直到你看到 go 错误的地方：
<!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 问题。 从绝对最小值 styles 开始，然后添加其他的，直到问题出现。 事情可能会很糟糕地相互作用。
解决方案3
3 2012-09-26 15:13:43
尝试将您的 header 更改为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
解决方案4
3 2011-07-08 10:03:03
Internet Explorer 直到 IE9 才支持边框半径。 在 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 中有该功能。
解决方案5
0 2012-05-29 18:00:06
如果没有元标记，圆角在 ie9 中不起作用。 奇怪的是，直到现在微软还相信自己可以属于自己的世界
解决方案6
0 2012-05-30 19:02:37
尝试这个：
border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
边界- -半径不起作用...
解决方案7
0 2012-05-31 12:07:19
我用这个：
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
行为border-radius.htc 和border-radius: 10px;
有阴影，在 IE9 中工作正常
解决方案8
0 2011-11-07 14:57:18
只需在border-radius.htc之前添加一个斜线。
behavior:相对于调用 css 文件的页面。 这应该有效。
IE9中的圆角
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.