將CSS3 PIE邊框半徑應用於jQuery UI組件

請查看下面的HTML，其中我使用了jQuery UI日期選擇器，並嘗試使用CSS3 PIE在Internet Explorer < = 8中對其進行圓角處理。該框顯示圓角但不包含日期選擇器。按照文檔中的建議，我也應用了position: relative; z-index: 0。將CSS3 PIE邊框半徑應用於jQuery UI組件

<!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>

來源

2011-04-08 WebMinder

<!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;}

來源

2011-04-09 11:52:50 ITroubs

感謝ITroubs，它的工作，也爲我打開樣式其他組件的方式！「我們永遠感激！」 – WebMinder 2011-04-11 13:48:00

將CSS3 PIE邊框半徑應用於jQuery UI組件

回答

相關問題