为什么当使用'relative'定位时，这个元素的大小设置为0px x 0px？

Question

我一直在使用this JavaScript image annotation plugin添加注释到一个项目 - 我设法得到它一个空白的网页上正常工作，与眼前这个HTML：

<div id="sample-image"> 
    <img src="img.jpg"></img> 
</div> 

而这个CSS的注解：

.circle { 
     border-radius: 50%/50%; 
     width: 20px; 
     height: 20px; 
     background: black; 
    } 

这将产生正确的结果......

豪版本时，我去把它添加到另一个项目，使用Twitter的自举和这个HTML

<div class="container-fluid"> 
     <div class="row-fluid"> 
     <div data-spy="affix" data-offset-top="200" class="span3"> 
      <div class="well sidebar-nav"> 
      <ul class="nav nav-list"> 
       <li><a href="#contact">Contact</a></li> 
      </ul> 
      </div> 
     </div> 
     <div style="float:right" class="span9"> 

      <div id="sample-image"> 
      <img src="img.jpg"></img> 
      </div> 
     </div> 
... 

的元素，因为在默认情况下定位到页面的顶部，他们有位置：aboslute属性，像这样：

<a class="circle" data-toggle="tooltip" data-placement="top" data-original-title="Church" rel="tooltip" onmouseover="$(this).tooltip('show')" style="left: 406px; top: 247px; position: absolute;"></a> 

此更改为位置：相对于使它们被正确地放置，但是它们的尺寸被设定为0px X 0像素根据铬以便它们不显示。

任何想法，这可能是为什么？

谢谢， 杰克

Answer 1

浮子有时会导致含对象塌陷。你有没有尝试过使用“display：inline-block”呢？ http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/