gpt4 book ai didi

jquery - 浏览器兼容性问题

转载 作者:太空宇宙 更新时间:2023-11-03 19:04:09 25 4
gpt4 key购买 nike

如何让我的网站在所有网络浏览器上看起来都一样?我主要使用 Firefox,但我是一名新的网页设计师,我很难让我的网站在所有浏览器上看起来都一样。

我尝试使用谷歌搜索 webkit、jquery,但没有人向我解释它是如何工作的。我还在学习jquery。我试图让我的标题导航栏和容器紧密结合在一起,就像我下面的代码在 Firefox 中看起来一样。但在 Internet Explorer 9 中,它们之间的距离更远了。此外,我正在尝试让我的侧边容器更靠近一些,但在我正在查看的两种浏览器中,它都无法正常工作。

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML    1.0                                        Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="template8.css" rel="stylesheet" type="text/css" />
</head>

<body style="background-attachment: fixed; background-repeat: no-repeat;" background="Images/template8 bkg.jpg">
<br />
<br />

<div id="header">
<br />
<br />
<br />
Floating Mountain Enterprise</div>
</div>
<div id="centeredmenu">
<ul>
<li><a href="portfolio.htm" class="active">Tab one</a></li>
<li><a href="portfolio.htm">Tab two</a></li>
<li><a href="portfolio.htm">Tab three</a></li>
<li><a href="portfolio.htm">Tab four</a></li>
</ul>
<br />
<br />
<br />
<br />
<br />
</div><!-- end header -->
<div id="left"><center><br />
<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE</center></div>
<div id="right"><center><br />
<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE</center></div>

<div id="container">
<div id="content">
<h1>HEADER ONE</h1> <!-- end h1 -->
YOUR CONTENT HERE!

<h2>Header Two</h2>
<p>More content here. </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<br />
<br />

</div> <!-- end content -->
</div> <!-- end container -->


</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font- size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}


#header
{ margin: 0px auto;
text-align:center;
font-size:x-large; font-weight:bold;
width: 810px;
height: 200px;
background: url(Images/template8%20header.jpg);
box-shadow: 15px 15px 5px #333;
-moz-box-shadow: 10px 10px 5px #333;
-webkit-box-shadow: 10px 10px 5px #333;
}

#centeredmenu {
float:left;
width:100%;
overflow:hidden;
position:relative;
}
#centeredmenu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#centeredmenu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#centeredmenu ul li a {
display:block;
margin:0 0 0 5px;
padding:3px 10px;
background:#FFF;
color:#000;
text-decoration:none;
line-height:1.3em;
}
#centeredmenu ul li a:hover {
background: #999;
color:#fff;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
color: #333;
background:#000;
font-weight:bold;
}

#container
{ margin: 0px auto;
padding-left:15px;
margin-top:27px;
width: 800px;
height: auto;
background: url(Images/container%20bkg.png);
box-shadow: 15px 15px 5px #333;
-moz-box-shadow: 10px 10px 5px #333;
-webkit-box-shadow: 10px 10px 5px #333;}

#content

{ margin: 0px auto;
padding-left:15px;
width: 780px;
padding-top:25px;
height: auto;
font-family: "MS UI Gothic";
font-style:oblique;
}

#left * {
background-color: #999;
-moz-opacity: 0.5 !important; -webkit-opacity: 0.5!important; -ms- filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important; filter: alpha (opacity=50) !important; opacity: 0.5 !important;
min-height: 400px;
margin-left:35px;
float: left;
width: 150px;
height: auto;
box-shadow: 15px 15px 5px #666;
-moz-box-shadow: 10px 10px 5px #666;
-webkit-box-shadow: 10px 10px 5px #666; }

#right *{
background-color:#999;
-moz-opacity: 0.5 !important; -webkit-opacity: 0.5!important; -ms- filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important; filter: alpha (opacity=50) !important; opacity: 0.5 !important;
margin-right:35px;
width: 150px;
min-height: 400px;
float: right;
box-shadow: 15px 15px 5px #666;
-moz-box-shadow: 10px 10px 5px #666;
-webkit-box-shadow: 10px 10px 5px #666; }

最佳答案

看起来完全每个浏览器上都一样,听起来有点极端......

相似(和流畅)在主要浏览器上听起来更真实。

人们通常认为,如果您没有“border-radius”或 CSS3 中其他很酷的东西可以在“旧浏览器”(例如 IE7 或 IE8)中工作,那是因为您的访问者必须更新他的浏览器。 ..

因此,至少设法为他提供您网站/应用程序的可用体验,如果他没有很酷的 CSS3 边框半径/不透明度/阴影......效果等等,那真的没什么大不了的... 如果他不更新他的浏览器,也许是因为他不太关心这类东西。

现在,如果您希望每个主要浏览器看起来都相似,您可以先使用 CSS 重置(this one 是常见的,还有其他一些),然后根据您的需要进行调整。它将重置浏览器用于显示 HTML 元素的默认设置,这些设置在某些方面有所不同。

然后,如果您仍然希望能够使用 CSS3 效果,您可以使用类似 PIE 的东西(或类似的)让你的效果在旧的 IE(6、7 和 8)上工作。但是,认为它会对性能产生一些影响,因为它使用 javascript 模拟 CSS3 功能。

关于jquery - 浏览器兼容性问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10962177/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com