固定位置的上、左值在不同浏览器中会发生变化
Top and left value of a fixed position changed in various browsers
我在我的web应用程序的页面上看到一个奇怪的鼠标位置问题。我认为一个特定元素在页面上的位置将是相同的，而不管它是在浏览器中呈现的。我希望使用来自客户端的位置值和在服务器上执行的一些屏幕捕获功能。
然而，我看到的是，每次当我选择页面的一部分，顶部和左侧的位置相对于浏览器的变化。我通过使用几个JavaScript属性测试了浏览器的顶部和左侧，但是固定位置的左侧和顶部对于不同的浏览器似乎是不同的(几个像素的差异)。
// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all ? true : false;
// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE);
// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;
// Temporary variables to hold mouse x-y pos.s
var tempX = 0;
var tempY = 0;
// Main function to retrieve mouse x-y pos.s
function getMouseXY(e) {
if (!e) e = window.event;
if (e.pageX || e.pageY) {
tempX = e.pageX;
tempY = e.pageY;
} else if (e.clientX || e.clientY) {
tempX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
tempY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
// catch possible negative values in NS4
if (tempX < 0) {
tempX = 0;
}
if (tempY < 0) {
tempY = 0;
}
// show the position values in the form named Show
// in the text fields named MouseX and MouseY
document.Show.clientX.value = e.clientX;
document.Show.clientY.value = e.clientY;
document.Show.pageX.value = e.pageX;
document.Show.pageY.value = e.pageY;
document.Show.scrollLeft.value = document.body.scrollLeft;
document.Show.scrollTop.value = document.body.scrollTop;
document.Show.MouseX.value = tempX;
document.Show.MouseY.value = tempY;
return true;
}html {
font-family:arial;
font-size:12px;
margin:0px;
padding:0px;
}<body>
<br/>
<br/>
<br/>
<br/> <span style="cursor:pointer;background:red;">.</span>
<div style="position:absolute;top:200px;left:200px;width:800px;height:800px;">
<form name="Show">
<input type="text" name="clientX" value="0" size="8">e.clientX
<br>
<input type="text" name="clientY" value="0" size="8">e.clientY
<br>
<input type="text" name="pageX" value="0" size="8">e.pageX
<br>
<input type="text" name="pageY" value="0" size="8">e.pageY
<br>
<input type="text" name="scrollLeft" value="0" size="8">scrollLeft
<br>
<input type="text" name="scrollTop" value="0" size="8">scrollTop
<br>
<input type="text" name="MouseX" value="0" size="8">Left
<br>
<input type="text" name="MouseY" value="0" size="8">Top
<br>
</form>
</div>
</body>请查看在各种浏览器中将鼠标悬停在红色框上时鼠标左上角的返回情况。
为什么不同的浏览器返回不同的上/左值?我需要为所有浏览器返回相同的值。如果有人能提供洞察这种行为和建议的方法，我可以规避这个问题，这将是伟大的。提前感谢。
你需要重置你的css总是为了避免这个问题，众所周知，每个浏览器都有自己的margin和padding默认值，你必须重置它们并为所有浏览器定义自己的和相同的默认值，在你的情况下，你至少需要:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
我修改了你的例子http://jsfiddle.net/QAc5L/通过包括reset.css文件从http://meyerweb.com，它完美地工作在firefox和chrome。
我认为一个特定元素在页面上的位置应该是不管在什么浏览器中都是一样的
你错了，它可以依赖于它所呈现的浏览器。不同的浏览器使用不同的呈现引擎，遵循相同的呈现规范。因此，尽管它们应该看起来相同，但规范并没有使所有实现看起来像素完全相同。除此之外，还有实现上的差异。
规范中也有一些松散的部分，留给浏览器开发人员或渲染引擎开发人员的决定，比如input字段的默认大小可能没有在任何规范中指定，主要是因为它们通常超出了范围。因此，如果你在页面的开头有一个input字段，如果你考虑位置，它的大小将影响static布局之后的所有内容。
如果你对页面有完美的控制，那么你可以用css来控制它，让它在所有浏览器中看起来完全一样。这就是css开发者所说的跨浏览器像素完美的css，而且非常简单。但是如果你不能在一般的页面上看到这个
css的页面，你可以控制css，使它看起来一样的地方。
当你报告一个问题时，确保你提到了浏览器的确切区别和名称+版本，确保其他人可以在问题之后重复这个问题。
我刚刚看了一下你的网页。我假定您正在用表格编写页面。
在您创建的示例页面中，您在顶部有一个按钮，按钮的大小和它所占用的空间取决于其中的文本，默认边框，填充，应用于它的边距等。因此，您可以在css中显式设置所有这些值，或者使用通用重置css。尽管如此，使用的字体呈现可能会产生非常轻微的差异。但是规避这个问题的一个简单方法是为元素设置一个显式的高度。
这个问题没有单一的解决办法，由你来决定。另一个简单的方法是为这个按钮的父div设置一个固定的高度，比如70px左右。
简而言之，你必须找出在不同浏览器中表现不同的元素，并使用显式的css来做一些事情。
还要注意，渲染引擎也会查看您指定的DTD。现在你使用的是过渡性的DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
您应该将其更改为strict DTD或使用HTML 5样式的DTD，这将告诉大多数浏览器表现良好。
因此，更改您的DTD，使用重置css，然后精心挑选行为不端的元素，以教他们使用css的一些礼仪。
由于每个浏览器都有自己独特的设置，它会影响页面，就像填充，边距会影响页面设计，如果你想在每个浏览器上使用相同的因素，你需要在你的页面中覆盖它，这样它在每个浏览器上看起来都一样。您可以尝试以下css来覆盖您的浏览器样式。下面的css也将支持html5标签
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
- 如何在浏览器宽度/高度变化时动态调整图像网格的大小
- 如何动态检测浏览器视口大小的变化
- gridster，如何自动适应浏览器大小的变化
- jQuery无法识别类的变化，尽管浏览器确实如此
- 我将如何定位网页中的所有内容，以便即使浏览器大小或屏幕分辨率发生变化，所有内容仍将保留在原位
- 为什么浏览器不't火灾变化事件
- 画布线宽度随着浏览器窗口大小的变化而变化，任何想法都可以解决
- 浏览器:检测显示配置的变化
- Javascript/jQuery检测哈希变化只有在浏览器的后退/前进按钮点击
- Javascript:使后端数据库的变化是反映到浏览器立即，这是可能的
- 如何根据浏览器语言的变化翻译“浏览”或“选择文件”的表单输入类型=文件
- 谷歌Chrome浏览器不更新iframe元素innerHTML动态变化后，在JavaScript
- 我的服务不会立即显示变化.必须刷新浏览器
- 当浏览器工具栏发生变化时执行操作
- 如何阻止浏览器在IMG上发送额外请求.JS中的SRC变化
- 在浏览器's开发人员工具上拦截鼠标指针变化
- 固定位置的上、左值在不同浏览器中会发生变化
- 有没有一种很好的跨浏览器的方法来检测输入的变化?然而
- Mobx商店的变化没有反映在浏览器中
- html网页paga在不同的浏览器中会发生变化
