为啥我的网站在其他浏览器上看起来不太好？ [关闭]

Posted 2023-03-05

【中文标题】为啥我的网站在其他浏览器上看起来不太好？ [关闭]

【英文标题】：Why my site doesn't look good on other browsers? [closed]为什么我的网站在其他浏览器上看起来不太好？ [关闭]

【发布时间】：2013-05-14 20:18:46

【问题描述】：

我现在正在开发我的网站，并考虑将 FireFox 作为主要测试区域，但是当我在 Chrome 和 IE9 上测试它时，结果有所不同。在 Chrome 上，一旦我打开页面，其中一个图层就不会放在它的位置，但是一旦我刷新它就完全适合我想要的位置。奇怪的？而在 IE 上，其中一个 div（左侧）似乎向左的边距较高，使其与其他 div 相距太远，并且字体不同，这使得某些单词更大并且不适合边框。让我的父亲在所有浏览器上看起来都不错的最佳想法是什么？我应该将哪个浏览器视为我的主要测试区域。

P.S：为什么人们对我的问题投反对票？我们都在学习。

【问题讨论】：

当您在 IE 中遇到浮动 div 问题时，您应该检查您的文档类型和标题。见***.com/questions/10305631/…

我认为人们对您的问题投反对票的原因基本上是在问。当我们看不到任何代码时，为什么我的网站在所有浏览器中看起来都不好。如果您提供链接，我认为这将有助于人们更轻松地回答您的问题。

【参考方案1】：

你应该使用类似样板的东西来启动每个项目，或者只是使用一些 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, 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://meyerweb.com/eric/tools/css/reset/

关于您应该在最重要的浏览器上测试的浏览器...从长远来看（每周），我会在一些次要的相关浏览器中进行测试，以确保其也能正常工作。

【参考方案2】：

首先，

您应该在您的 CSS 中使用重置/规范化脚本。一个好的是Eric Meyers's。

在样式表的开头包含此内容。

/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
   License: none (public domain)
*/

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; 

【讨论】：

我加入了这个，但事情变得更糟了，浮动 div 与其他 div 的浮动更远。我还注意到底部的 div 也与左边的完全一样浮动。

是的，你应该先包含这个，然后开始编写你的css。它基本上消除了浏览器之间的不一致，例如边距和填充等。然后您的代码通常可能存在问题。你有一个可行的例子吗？

您有 jsfiddle 或工作示例吗？ jsfiddle.net

不，我正在我的电脑上本地开发它

就像我说的，如果你能创建一个 jsfiddle，我将能够提供帮助，在此之前我真的无能为力。

【参考方案3】：

没有看到代码不能准确地说，但是您在开发时错过了最佳实践。你应该在 IE 和其他浏览器范围内开发时检查侧面，然后你可以在上升时修复它们。

检查您的文档类型。 重新设置元素 确定 IE 框模型问题。