奇怪位置（参见示例中）

参见http://log85.no-ip.org/q100.html 奇怪位置（参见示例中）

为什么第二块是在该位置？ //在firefox和chrome中

2011-12-19 LaNsHoR

你有没有tryed添加这个CSS：

canvas{display:block;width:100px;height:100px;}

更新：它只是因为油画有一个默认的尺寸更大的在这种情况下，女巫比预期导致HTML的奇怪，但“正常”的反应。

Regards，

来源

2011-12-19 22:02:28 plauriola

与canvas的默认宽度和高度有关。如果将它们设置为100％，则可以解决问题。

来源

2011-12-19 21:52:43 Vigrond

固定但是...我不明白为什么。是一个壁虎/ webkit的错误？示例代码是否正确？：S – LaNsHoR 2011-12-19 22:05:16

它似乎与显示有关：inline-block。因为我无法用float：left产生相同的结果。这可能是一个错误 – Vigrond 2011-12-19 22:06:46

如果您使用下面的代码，它稍微修复了问题。

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>[ LoG85 ] - [ Duda CSS ]</title> 
     <style type="text/css"> 
     body {background:#012;text-align:center} 
     .container {width:800px;margin:auto;border:1px solid blue} 
     .block {display:inline-block;border:1px solid green;width:320px;height:240px} 
     </style> 
    </head> 
    <body> 
     <div class="container"> 

     <div class="block"></div>  I removed <canvas></canvas> from here. 
     <div class="block"></div> 
     <div class="block"><canvas></canvas></div> 
     <div class="block"><canvas></canvas></div> 
     <div class="block"><canvas></canvas></div> 
     <div class="block"><canvas></canvas></div> 
     </div> 
    </body> 
</html>

注：我没有测试它在Chrome，因为我没有安装Chrome，但它在IE和Firefox正常工作。

来源

2011-12-19 22:00:14 Lion

奇怪位置（参见示例中）

回答

相关问题