JQuery的圓角在Internet Explorer（IE）搞砸了

我使用jQuery的jquery.corner.js對TD的一些標籤創建圓角，他們看起來不錯的IE EXCEPTJQuery的圓角在Internet Explorer（IE）搞砸了

，如果你打開新選項卡，然後回到頁面
如果你轉到另一個選項卡，單擊一個鏈接，然後回到頁面
如果您將鼠標懸停在執行javascript的菜單上（我認爲）。

將圓角替換爲水平線，並將td標籤內的文本向下推。但是，頁面刷新後，渲染將恢復正常。在所有情況下，它都能在Firefox中完美運行。

任何想法？

僅供參考，我使用的JavaScript代碼如下（這是一個MOSS 2007頁）：

$(document).ready(function(){ 
    $("table.ms-navheader td").corner("top"); 
});

下面是顯示完全問題的一個樣本HTML頁面：

<html> 
    <head> 
     <script type="text/javascript" src="jquery-1.2.6.js"></script> 
     <script type="text/javascript" src="jquery.corner.js"></script> 
     <script type="text/javascript"> 
      <!-- 

      $(document).ready(function() 
      { 
       $("div").corner("top"); 
       $("td").corner(); 
      }); 

      //--> 
     </script> 
    </head> 
    <body> 
     <table> 
      <tr> 
       <td style="background-color: blue"> 
        TD that will be messed up. 
       </td> 
      </tr> 
     </table> 
     <div style="background-color: green"> 
      divs don't get messed up. 
     </div> 
    </body> 
</html>

在上面的代碼中，一旦你打開一個新的標籤，TD將會變得混亂，但不是div。我對MOSS發出的HTML沒有太多的控制，否則我可能會咬傷子彈，並在這裏使用DIV而不是表格。

來源

2008-10-20 Ryan Shripat

有多個jquery.corner.js插件。您正在使用的鏈接將會很有幫助。 :) – 2008-10-21 10:17:53

我有什麼，但麻煩圓角JavaScript庫（尤其是IE6和7）

在我恢復了涉及圖像更傳統的方法結束。多一點設置，但完美的作品。

來源

2008-10-20 18:15:29 RichH

想象一下你遇到的問題有點難，鏈接會非常有幫助。確保您的表格的每個單元格都定義了高度和寬度屬性。它可能是一個hasLayout問題。

來源

2008-10-20 18:17:07

我同意RichH，我認爲當試圖創建圓角時，所有流行的JavaScript庫都會有所不足。

我總是發現自己使用的是cornerhop：http://wigflip.com/cornershop/，它是一個圖像/ css生成器，它可以幫助您手動製作圓角邊緣。

來源

2008-10-20 18:23:18 mmattax

個人而言，我很高興他們不會添加一堆額外的圖片，標籤，CSS或任何需要爲不支持CSS屬性的瀏覽器創建圓角。如果不支持，我寧願沒有圓角（在大多數情況下）。 – 2010-06-18 23:45:56

你可能想試試這個插件，而不是jquery.curvycorners.js。

我們在我們的項目中使用它並沒有任何問題 - 您可能需要附加/前置跨度，但它非常簡單。

最好的東西 - >默認爲消除鋸齒。

http://blue-anvil.com/jquerycurvycorners/test.html

來源

2008-10-21 10:05:12 penderi

這件事很棒。我也遇到了另一個插件的問題。 – 2009-07-31 22:47:50

工程真棒，但在IE8崩潰！ – 2010-09-14 03:43:48

我已經搜查，並沒有發現在jQuery UI的標籤解決圓角。 jquery themeroller支持圓角，但文檔說它們在IE中不起作用。

下面是25種不同的圓角方法 http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

來源

2009-02-12 23:48:14

我有類似的問題，甚至在Firefox良好的頁面，我發現，如果你申請「角落」到有一類設置一個元素背景顏色的角落從未得到應用。在我的情況下，我添加了一個名爲'selected'的類，它爲UL中選定的'選項卡'提供了不同的背景顏色。爲了防止這一點，我用的js而不是CSS應用背景顏色我已經加入了彎道後：

$('.selected').css('background-color', '#3296C0');

而且它添加一個：懸停從而改變背景顏色的角平方後退上盤旋。我迄今爲止的解決方案是使用onhover事件重新應用角落（您也可以在此設置顏色）。

$('#top-nav li a').hover(function(){ 
     $(this).corners('top'); 
    });

至於IE6 - 一個惡夢 - 它不會那麼糟糕，如果我能發現IE6，只是不添加角落留給他們的平方。甚至沒有嘗試過IE 7呢...

來源

2009-06-04 12:58:03 Kris

在IE中我用DD_Roundies庫有更好的效果。只能在IE中工作。對於Firefox，您需要添加-moz-border-radius樣式。

來源

2009-09-18 10:28:26

curvycorners.js和jquery.curvycorners.js僅在您不想使用任何轉換時纔有效。

如果您有手風琴或淡入/淡出選項卡效果，則帶圓角的元素在更改後無法正確呈現。

來源

2010-05-24 13:24:05 Gafroninja

使jquery彎曲的角落工作在IE只是給元素一個背景顏色。不知道爲什麼它是如此...只是像魔術一樣工作！

來源

2011-05-15 22:04:17 Ozioma

JQuery的圓角在Internet Explorer（IE）搞砸了

回答

相關問題