1

I have an HTML5 canvas image where I've drawn some points and I want to align some div tags and text input tags next to the points.

Unfortunately, browsers do not agree with the space between each div and input tags.

I've found a hack for the input tag, by specifying height with CSS. Now input tags have the same space between them for every browsers. It seems the default height of input tags was not the same depending on the browser, very very weird.

I've tried the same thing for my div tags, but I can't get the right alignment for every browsers.

text input tags alignment working with every browsers with CSS hack: http://jsfiddle.net/baptx/XcKZj/

div tags alignment is not the same depending on the browser (configured for Firefox): http://jsfiddle.net/baptx/92gPY/

I'm using Firefox on Linux and I've noticed that Windows version does not render the same margins. Chrome does also not agree with Linux Firefox, when running on Linux or Windows. Opera is great, it always agree with Linux Firefox, running on Linux or Windows.

I first thought, it was due to web browser engine, Gecko rendering differently compared to Webkit, but if Windows and Linux version of Firefox do not agree, it should be something else.

Has anyone and idea where it comes from and how to fix this with div tags?

4

2 回答 2

5

为什么：因为规定的样式表没有规定像边距这样的间距。

解决方案：使用 CSS 重置样式表，并在站点范围的样式表中明确声明您自己的默认值。

这是一个有一些重置的网站：http ://www.cssreset.com/

于 2012-06-12T14:10:37.447 回答
3

听起来您需要在样式中包含重置 css。这将有助于统一（但不能完全消除）浏览器之间的差异。

这是两个流行的重置：

埃里克迈耶的重置

YUI 重置

于 2012-06-12T14:13:57.403 回答