1
내 웹 사이트가 모든 웹 브라우저에서 어떻게 보이게하려면 어떻게해야합니까? 나는 주로 Firefox를 사용하지만 새로운 웹 디자이너이기 때문에 모든 브라우저에서 웹 사이트를 똑같이 보이게하는 데 어려움을 겪고 있습니다.브라우저 호환성 문제
나는 웹킷, 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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </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; }
브라우저 호환성 문제의 세계에 오신 것을 환영합니다. ... – Tudor
모든 브라우저에서 작동하도록 웹 사이트를 디자인하고, 모든 브라우저에서 100 % 동일하게 보지 않는 것을 잊어 버려야합니다. 일반적으로 사용자 경험이 절실하다는 것을 의미합니다. 또한 JQuery보다는 CSS에 대해 배워야한다. – nico
"모든 웹 브라우저"는 무엇을 의미합니까? – lucuma