CSS - Rounded corners in IE - IE9
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.7开发者_如何学C42.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)
IE6-8 don't support CSS3. At all.
You need something like CSS3PIE for them to work.
It should, however, work in IE9.
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.
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.
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">
rounded corners does not work in ie9 without the meta tags. Its strange that until now microsoft still believe they can belong to their own world
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
Try this:
border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
The border---radius does not work...
Just add a slash before border-radius.htc.
The url path in behavior: is relative to the page that is calling the css file.
This should work.
加载中,请稍侯......
精彩评论