将 CSS3 PIE 边框半径应用于 jQuery UI 组件答案

【问题标题】：Applying CSS3 PIE border radius to jQuery UI components将 CSS3 PIE 边框半径应用于 jQuery UI 组件
【发布时间】：2011-04-08 15:12:52
【问题描述】：

请查看下面的 HTML，其中我使用了一个 jQuery UI 日期选择器，并尝试在 Internet Explorer CSS3 PIE 为其设置圆角。该框显示圆角，但不显示日期选择器。我还按照文档中的建议申请了position: relative; z-index: 0。

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
    <title>jQuery UI Example Page</title>  
    <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" rel="stylesheet" />  
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>  
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>  
    <script type="text/javascript">  
        $(function () {  
            $('#datepicker').datepicker({  
                inline: true  
            });  
        });  
    </script>  
    <style type="text/css">  
        .roundedCorners {  
            -webkit-border-radius: 10px;  
            -moz-border-radius: 10px;  
            border-radius: 10px;  
            behavior: url(PIE.htc);  
            position: relative;  
            z-index: 0;  
        }  
    </style>  
</head>  
<body>  
    <div class="roundedCorners" style="width: 100px; height: 100px; background-color: Blue">  </div>  
    <br />  
    <div id="datepicker" class="roundedCorners"></div>  
</body>  
</html>

【问题讨论】：

标签： internet-explorer css rounded-corners css3pie

【解决方案1】：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jQuery UI Example Page</title>
        <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" rel="stylesheet" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('#datepicker').datepicker({
                    inline: true
                });
            });
        </script>
        <style type="text/css">
            .roundedCorners {
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
                behavior: url(PIE.htc);
                position: relative;
                z-index: 0;
            }
            .ui-datepicker{
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
                behavior: url(PIE.htc);
                position: relative;
                z-index: 0;}
        </style>
    </head>
    <body>
        <div class="roundedCorners" style="width: 100px; height: 100px; background-color: Blue"> </div>
        <br />
        <div id="datepicker" class="roundedCorners"></div>
    </body>
</html>

您必须为特定的 UI 类添加圆角！

我对您的示例所做的修改适用于 FFX、Opera、IE8 和 IE8 兼容性视图。它只会显示带有圆角的外框。

这是一个修改，使 datepicer 在 IE8、FFX 3.1.5 和 Opera 10 中看起来相同

        .ui-datepicker-inline div{
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            behavior: url(PIE.htc);
            position: relative;
            z-index: 0;}
        .ui-datepicker-inline{
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            behavior: url(PIE.htc);
            position: relative;
            z-index: 0;}

【讨论】：

感谢 ITroubs，它工作正常，也为我设置其他组件的样式开辟了道路！ “我们永远感激不尽！”