jQuery工具提示定位功能在瀏覽器中的行為有所不同

Question

我是javascript的新手，嘗試使用工具提示在網頁上顯示圖像標題。

我從各種示例改編的代碼可以在Firefox上正常工作，但是在Google Chrome上反轉了my＆at位置，而在IE上則完全不起作用。

   <script>
    $(function() {
        $( document ).tooltip( { position: {my: 'center bottom+10' , at: 'center top'}});
      });
  </script> 

這種樣式在Chrome和Firefox中可以正常使用，但是在IE中無法調整大小或顯示彎角

<style type="text/css">
 .ui-tooltip-content {
    display: inline-block;
    background:transparent;
    padding:5px;
    font: bold 14px "Arial", Sans-Serif;
    color: #000080;


    }    
   .ui-tooltip {
    padding: 10px 20px;    
    color:#eee;
    border-radius: 20px;    
    box-shadow: 0 0 7px black;
  }
</style>

圖書館資料

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">

有問題的頁面在這里http://www.millwall-history.org.uk/Season_1982-83.htm

Answer 1

解決方法是包含以下meta標簽

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

這樣可以使用工具提示功能，並在表格上顯示彎曲的邊框。

我無法解決的一個煩人的錯誤是Firefox和IE中的my和position位置與firefox中的位置相反！

Answer 2

您是否嘗試了正文選擇器而不是文檔選擇器？

$( body ).tooltip( { position: {my: 'center bottom+10' , at: 'center top'}});

對於邊界半徑，您需要：

.ui-tooltip {
    padding: 10px 20px;    
    color:#eee;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;   
    box-shadow: 0 0 7px black;
  }