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

     2023-03-05     90

关键词:

【中文标题】为啥我的网站在其他浏览器上看起来不太好? [关闭]【英文标题】: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 框模型问题。

【讨论】:

为啥我的设计元素在所有浏览器中看起来都不同?更新[关闭]

】为啥我的设计元素在所有浏览器中看起来都不同?更新[关闭]【英文标题】:Whydoesmydesignelementslookdifferentinallbrowsers?UPDATE[closed]为什么我的设计元素在所有浏览器中看起来都不同?更新[关闭]【发布时间】:2013-03-0310:36:04【问题... 查看详情

为啥我的标志没有出现在主页上? [关闭]

】为啥我的标志没有出现在主页上?[关闭]【英文标题】:WhymylogoisnotappearingontheHomepage?[closed]为什么我的标志没有出现在主页上?[关闭]【发布时间】:2015-08-0414:53:37【问题描述】:您好,我想知道为什么我的徽标没有出现在主... 查看详情

为啥我的网站在 Mac 上的 safari 上滚动过度?

...仅发生在Mac上的safari上(而不是iPhone上)。当我使用其他浏览器(例如Chrome)时, 查看详情

如何在大于 17 英寸的屏幕上显示不同的内容?

...主页上有内容。当我在更大的屏幕上打开我的网站时,它看起来不太好,而17英寸是使我的内容看起来可以接受的最大屏幕尺寸。我想针对19、20、21、22等英寸的屏幕尺寸 查看详情

为啥我的 CSS 在移动设备上与在狭窄的桌面浏览器上看起来不同,我该如何更改? [复制]

】为啥我的CSS在移动设备上与在狭窄的桌面浏览器上看起来不同,我该如何更改?[复制]【英文标题】:WhydoesmyCSSlookdifferentonamobiledevicethanitdoesonmynarrowdesktopbrowserandhowdoIchangeit?[duplicate]为什么我的CSS在移动设备上与在狭窄的桌面浏... 查看详情

为啥我的 CSS3 动画在 Google Chrome 中不流畅(但在其他浏览器上非常流畅)?

】为啥我的CSS3动画在GoogleChrome中不流畅(但在其他浏览器上非常流畅)?【英文标题】:Whyisn\'tmyCSS3animationsmoothinGoogleChrome(butverysmoothonotherbrowsers)?为什么我的CSS3动画在GoogleChrome中不流畅(但在其他浏览器上非常流畅)?【发布... 查看详情

为啥我的移动版网站上出现笑脸和空白? [关闭]

】为啥我的移动版网站上出现笑脸和空白?[关闭]【英文标题】:Whyisthereasmileyfaceandwhitespaceonthemobileversionofmysite?[closed]为什么我的移动版网站上出现笑脸和空白?[关闭]【发布时间】:2014-09-0602:05:36【问题描述】:这里是网站:ht... 查看详情

为啥图像不显示在我的 ASP.Net 核心网站上?

】为啥图像不显示在我的ASP.Net核心网站上?【英文标题】:Whydon\'ttheimagesdon\'tshowuponmyASP.Netcorewebsite?为什么图像不显示在我的ASP.Net核心网站上?【发布时间】:2016-12-3102:52:44【问题描述】:我有一个asp.net核心Web应用程序,我想... 查看详情

视频在 iPhone 上看起来不可见

...】:我正在向我的网站添加视频,这在桌面和AndroidChrome浏览器上运行完美。然而,在iOSSafari上,视频不显示,它只显示一个播放按钮,而不是像其他浏览器那样预览视频。如果我单击播放按钮,它将按预期播放视频。我不确定... 查看详情

为啥我的库无法在 CocoaPods 网站上扩展?

】为啥我的库无法在CocoaPods网站上扩展?【英文标题】:WhyismylibrarynotabletoexpandontheCocoaPodswebsite?为什么我的库无法在CocoaPods网站上扩展?【发布时间】:2015-05-2805:37:38【问题描述】:我正在尝试通过CocoaPods网站访问我图书馆的信... 查看详情

为啥头文件在其他编程语言中没有流行起来? [关闭]

】为啥头文件在其他编程语言中没有流行起来?[关闭]【英文标题】:Whydidn\'theaderfilescatchoninotherprogramminglanguages?[closed]为什么头文件在其他编程语言中没有流行起来?[关闭]【发布时间】:2008-12-0213:34:44【问题描述】:根据对这... 查看详情

如何让用户在我的网站上登录数月?

...【问题描述】:我正在使用OpenID。如何使用户即使在关闭浏览器窗口后也能长时间保持登录状态?如何存储和访问用户的User对象?基本上,我想我只是不太了解会话在Java中是如何工作的。【问题讨论】:【参考方案1】:所以你... 查看详情

为啥我的下一个和上一个按钮在 IOS 上看起来很奇怪?

】为啥我的下一个和上一个按钮在IOS上看起来很奇怪?【英文标题】:WhydomyNextandPreviousButtonslookoddonIOS?为什么我的下一个和上一个按钮在IOS上看起来很奇怪?【发布时间】:2020-07-2616:17:55【问题描述】:我目前正在重新设计我的... 查看详情

网站在不同浏览器上的行为不同[关闭]

】网站在不同浏览器上的行为不同[关闭]【英文标题】:Websiteactsdifferentondifferentbrowsers[closed]【发布时间】:2014-03-0218:45:54【问题描述】:我在这个网站上工作。它有一个全屏视频背景,还有其他javascript即将推出。网址:www.omod.b... 查看详情

我的网站不会在 iPhone 上加载图像,但会在所有其他浏览器、移动设备或桌面设备上加载

】我的网站不会在iPhone上加载图像,但会在所有其他浏览器、移动设备或桌面设备上加载【英文标题】:Mysitedoesn\'tloadimagesoniPhonesbutdoesonallotherbrowsers,mobileordesktop【发布时间】:2021-02-0421:56:35【问题描述】:我一直在为我妈妈想... 查看详情

Firefox 将我的图像呈现为错误的颜色 - 但在其他浏览器中很好 [关闭]

】Firefox将我的图像呈现为错误的颜色-但在其他浏览器中很好[关闭]【英文标题】:Firefoxrenderingmyimagesasthewrongcolor-butfineinotherbrowsers[closed]【发布时间】:2016-04-0722:22:12【问题描述】:我已经建立了一个网站,但是我在Firefox中遇到... 查看详情

为啥这个 scrollLeft JS 函数不能在我的本地 wordpress 网站上运行?

】为啥这个scrollLeftJS函数不能在我的本地wordpress网站上运行?【英文标题】:Whyisn\'tthisscrollLeftJSfunctionworkingonmylocalwordpresssite?为什么这个scrollLeftJS函数不能在我的本地wordpress网站上运行?【发布时间】:2021-11-0623:45:05【问题描述... 查看详情

为啥我的字体在 IE9 中看起来好多了?

...Opera、Firefox和Chrome好多了。怎么可能?如何使文本在其他浏览器中看起来像在IE中 查看详情