Qtip的箭頭不顯示在IE中

Question

qTip在IE中沒有箭頭，但箭頭在FF中顯示。隨後的jQuery已經從1.3更新後，1.7.2

$element.qtip({ 
       content: { 
        text: text, 
        prerender: true, 
        title: { 
         text: this.settings.translationDictionary.lblWarningText, 
         button: "<div class='confWarningClose'>" + this.settings.translationDictionary.tblCloseWarningText + "</div>" 
        } 
       }, 
       position: { 
        corner: { 
         target: "bottomMiddle", 
         tooltip: "topMiddle" 
        } 
       }, 
       style: { 
        tip: { corner: "topMiddle", size: { x: 20, y: 10} }, 
        width: 220, 
        "word-wrap": "break-word", 
        "font-size": "13px", 
        color: "Red", 
        "text-align": "center", 
        title: { 
         "padding-right": "5px", 
         "padding-top": "3px", 
         "padding-left": "60px", 
         "color": "#F4D546", 
         background: "#424242", 
         height: "8px" 
        }, 
        border: { 
         width: 3, 
         radius: 5, 
         color: '#424242' 
        } 
       }, 
       show: { 
        solo: true, 
        delay: 0, 
        when: { 
         target: false, 
         event: "click" 
        } 
       }, 
       hide: "" 
      }) 

圖像與例如這裏 http://content.screencast.com/users/blackvoodoo/folders/Jing/media/30fabe28-1fc5-475e-a042-3bb551ee0968/arrow.png

Answer 1

好，我解決了這個問題箭頭消失。需要更新函數createTip（角落）。我們不能通過函數prepend（）添加VML元素。相反，我們通過html（）向self.elements.tip添加VML元素。下面更新的函數createTip（corner）：

function createTip(corner) { 
    var self, color, coordinates, coordsize, path; 
    self = this; 

    // Destroy previous tip, if there is one 
    if (self.elements.tip !== null) self.elements.tip.remove(); 

    // Setup color and corner values 
    color = self.options.style.tip.color || self.options.style.border.color; 
    if (self.options.style.tip.corner === false) return; 
    else if (!corner) corner = self.options.style.tip.corner; 

    // Calculate tip coordinates 
    coordinates = calculateTip(corner, self.options.style.tip.size.width, self.options.style.tip.size.height); 

    // Create tip element 
    self.elements.tip = $('<div class="' + self.options.style.classes.tip + '" dir="ltr" rel="' + corner + '" style="position:absolute; ' + 
    'height:' + self.options.style.tip.size.height + 'px; width:' + self.options.style.tip.size.width + 'px; ' + 
    'margin:0 auto; line-height:0.1px; font-size:1px;"></div>'); 
    var tipobject = ''; 
    // Use canvas element if supported 
    if ($('<canvas>').get(0).getContext) 
     tipobject += '<canvas height="' + self.options.style.tip.size.height + '" width="' + self.options.style.tip.size.width + '"></canvas>'; 

    // Canvas not supported - Use VML (IE) 
    else if ($.browser.msie) { 
     // Create coordize and tip path using tip coordinates 
     coordsize = self.options.style.tip.size.width + ',' + self.options.style.tip.size.height; 
     path = 'm' + coordinates[0][0] + ',' + coordinates[0][1]; 
     path += ' l' + coordinates[1][0] + ',' + coordinates[1][1]; 
     path += ' ' + coordinates[2][0] + ',' + coordinates[2][1]; 
     path += ' xe'; 

     // Create VML element 
     tipobject += '<v:shape fillcolor="' + color + '" stroked="false" filled="true" path="' + path + '" coordsize="' + coordsize + '" ' + 
     'style="width:' + self.options.style.tip.size.width + 'px; height:' + self.options.style.tip.size.height + 'px; ' + 
     'line-height:0.1px; display:inline-block; behavior:url(#default#VML); ' + 
     'vertical-align:' + ((corner.search(/top/) !== -1) ? 'bottom' : 'top') + '"></v:shape>'; 

     // Create a phantom VML element (IE won't show the last created VML element otherwise) 
     tipobject += '<v:image style="behavior:url(#default#VML);"></v:image>'; 

     // Prevent tooltip appearing above the content (IE z-index bug) 
     self.elements.contentWrapper.css('position', 'relative'); 
    }; 

    // Attach new tip to tooltip element 
    self.elements.tip.html(tipobject); 
    self.elements.tooltip.prepend(self.elements.tip); 

    // Create element reference and draw the canvas tip (Delayed til after DOM creation) 
    self.elements.tip = self.elements.tooltip.find('.' + self.options.style.classes.tip).eq(0); 
    if ($('<canvas>').get(0).getContext) 
     drawTip.call(self, self.elements.tip.find('canvas:first'), coordinates, color); 

    // Fix IE small tip bug 
    if (corner.search(/top/) !== -1 && $.browser.msie && parseInt($.browser.version.charAt(0)) === 6) 
     self.elements.tip.css({ marginTop: -4 }); 

    // Set the tip position 
    positionTip.call(self, corner); 
};