我正在实现一个使用ASP.Repeater来显示每个注释的注释控件。当前使用表来显示注释本身，以将一些图像划分出来以在气泡中显示注释。

我知道表格应该是设计布局的缩影，对于浏览器来说显示起来确实很昂贵，但是我不确定如何将圆角放在正确的位置并确保所有内容对齐。

是否有人对HTML / CSS有任何建议，示例，技巧，还是我应该坚持使用表格并希望做到最好？

解决方案

有几种不同的方法可以在CSS中进行圆角处理

我宁愿尽可能在表中使用CSS，只是因为我发现代码更易于维护，而且听起来像一个项目，它的范围很广。

简而言之，我们需要这样的东西：

<style>
  .start { background-image: url("topofbubble.png"); height: <heightofimage>; }
  .end { background-image: url("bottomofbubble.png"); height: <heightofimage>; }
  .body {background-image: url("sliceofbubblemiddle.png"); }
</style>

...

<div class="comment">
  <span class="start"></span>
  <span class="body">I would like to say that div layouts are far better than table layouts.</span>
  <span class="end"></style>
</div>

那应该让我们开始。我没有专门尝试该代码，并且在必要时可以提供完整的示例。

我所见过的使用DIV元素创建圆角的最佳资源是有关" A List Apart"的文章，请参见http://alistapart.com/articles/customcorners/。如果我们希望使用DIV元素来布局整个网站，那么该网站上还有其他几篇相关文章。看：

http://alistapart.com/articles/slidingdoors/
http://www.alistapart.com/articles/slidingdoors2/
http://www.alistapart.com/articles/negativemargins/

如果我们愿意为IE用户提供尖角，则可以使用border-radiusCSS属性轻松解决圆角问题。当前没有浏览器将其实现为基本属性，但有些浏览器将其作为前缀属性。例如，要在Firefox中使用它，可以使用属性-moz-border-radius，对于Safari，则可以使用-webkit-border-radius等。