Google 地图 V3 API - css 重置导致滚动条
这是在我的重置脚本中:
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
我的谷歌代码调整信息窗口的大小以适应内容,除非我的 CSS 中有此代码。通过反复试验,我发现如果删除 margin:0 ,那么滚动条就会消失,内容会正确适合,并且信息窗口会按预期调整大小。
我还发现,如果我从标签列表中删除“p”,它也可以工作 - 所以我假设我不能在重置脚本中将边距设置为 0。
我不知道如何解决这个问题。这毫无意义!
这段代码实际上有效,谷歌地图信息窗口也很好:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
p{
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
This is in my reset script:
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
My google code sizes the infowindow to fit the content unless I have this code in my CSS. By trial and error I found that if I remove margin:0 then the scrollbars disappear and the content fits correctly, and the infowindow is resized as expected.
I also found that if I removed the "p," from the list of tags it works as well - so I am assuming I can't have the margin set to 0 in my reset script.
I have no idea how to resolve this. It makes no sense!
This code actually works and the google maps infowindow is fine:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
p{
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您如何将 Google 地图包含在您的网页中?是弹出窗口吗?一个 iframe?或者它是否直接嵌入到某一页面中,例如 contactus.html?如果不知道 HTML 如何工作,就很难查明错误。另外,这种情况是只在IE中发生,还是在多个浏览器中发生?了解范围有助于确定是浏览器问题还是编码问题。
如果可能的话,我的解决方案是对 Google 地图网页使用不同的样式表。这样您就不必处理reset.css 文件中的任何问题。
How are you including the Google Maps in your web page? Is it a popup window? An iframe? Or is it embedded directly into one of pages, like contactus.html? Without knowing how the HTML works its hard to pinpoint errors. Additionally, does this only happen in IE, or does it happen in multiple browsers? Knowing the scope helps determine if its a browser issue or a coding issue.
If it is possible, my solution would be to use a different stylesheet for the web page with Google Maps. That way you don't have to deal with whatever the issue is in the reset.css file.