跨度內的鏈接顯示：無;風格是可見

所以我用jQuery用戶界面對話框如下：跨度內的鏈接顯示：無;風格是可見

$(document).ready(function() { 

    // vytvorenie kurzu 
    $('a.openModalBox').click(function(e) { 
     var href = $(this).attr('href'); 
     if ('#/' == href) { 
      e.preventDefault(); 
      $('span.modalBoxContent').dialog({ 
       modal: true, 
       resizable: false, 
       title: 'Upozornenie', 
       zIndex: 1, 
       show: 'fast', 
       hide: 'slow', 
       width: 600, 
       height: 90, 
       position: 'middle' 
      }).width(600); 
     } 
    }); 

});

我的HTML看起來像這樣：

<a href="#/" class="next openModalBox lessOpacity"> 
    Go forward 
<span class="modalBoxContent"> 
    <p style="font-size: .8em; text-align: center;"> 
      Lorem ipsum.<br /> 
      Lorem ipsum <a href="/index/index" class="accessible-link">lorem ipsum</a>. 
     </p> 
</span> 
</a>

及相關CSS是：

span.modalBoxContent { 
    display: none; 
}

該作品當span.modalBoxContent裏面只有一個文本時很好。但是如果有HTML代碼，那麼跨度並不完全隱藏。在這種情況下（參見上面的HTML），鏈接是可見的。

這怎麼可能以及如何解決它？

來源

2010-10-13 Richard Knop

寫valid HTML。

A span元素不能包含p元素。爲了從錯誤中恢復，您的瀏覽器在它開始p之前結束span，然後忽略span的結束標記作爲另一個錯誤。（a元素也在線，也無法容納塊級元素，如p）

您使用佔位符文本使其難以分辨內容的語義應該是什麼，但你可能應該使用更多的東西一樣：

<a href="#id_of_related_content">link text</a> 
<div id="id_of_related_content"> 
    Your initially hidden content here 
</div>

不要忘了做link's href attribute to point to something sensible。

來源

2010-10-13 06:24:14 Quentin

跨度內的鏈接顯示：無;風格是可見

回答

相關問題