html - 网页样式问题，适用于 firefox，不适用于 ie 或 chrome

标签 html css

对于最近的 html 和其他语言，我非常缺乏经验，几年前我受过一点教育，但仅此而已。我有一个 friend 请求帮助为他设计一个简单的网页。除了我在网站上创建的图库页面之外，我已经解决了所有问题。此页面似乎在 firefox 中运行良好，但在 chrome 或 is 上运行不佳。在 ie 中，它似乎完全忽略了 css 表。在 chrome 中，我无法加载“预览”图像。

图库页面的 HTML:

<!DOCTYPE html>
<html>
    <style type="text/css">
    body {
    background: #222;
    margin-top: 20px;
    }
     
    h3 {
    color: #eee;
    font-family: Verdana;
    }
     
    .thumbnails img {
    height: 80px;
        padding: 1px;
    margin: 0 10px 10px 0;
    }
     
    .thumbnails img:hover {
    cursor:pointer;
    }
     
    .preview {
    padding: 1px;
    display: block;
    max-width:500px;
    max-height:399px;
    width: auto;
    height: auto;
    }

#content, html, body {
    height: 98%;
}

#left {
max-height:400px;
    float: left;
    width: 75%;
    background: white;
    height: 100%;
    overflow: auto;
}

#right {
max-height:400px;
    float: left;
    width: 25%;
    background: white;
    height: 100%;
    overflow: auto;
}

    </style>

   <head>
      <meta charset="UTF-8">
      <title>Gallery - Urban Outdoor Design</title>
      <link rel="stylesheet" type="text/css" 

href="css/style.css">
   </head>
   <body height: 1000px>

      <div id="page">
         <div id="header">
            <a href="index.html" id="logo"><img 

src="images/logo.png" alt="Logo"></a>
            <ul>
               <li>
                  <a href="index.html">Home</a>
               </li>
               <li>
                  <a href="about.html">About Us</a>
               </li>
               <li>
                  <a 

href="services.html">Services</a>
               </li>
               <li class="current">
                  <a 

href="gallery.html">Gallery</a>
               </li>
               <li>
                  <a href="billpay.html">Bill 

Pay</a>
               </li>
               <li>
                  <a 

href="contact.html">Contact</a>
               </li>
            </ul>
         </div>
         <div id="body">
            <div id="content">
               <h1>Some Samples of our work:</h1>

               <br>Use the scrollbar at the right 

to browse images, point to an image to view a 

larger version on the left.
              
            </div>


     <div class="gallery" align="center">

<div id="content">
  <div id="left"><img 
    id="preview"
    class="preview"
   
></div>
    <div id="right">
    <div class="thumbnails" align="center">
    <img onmouseover="preview.src=this.src" 

src="gallery/image1.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=this.src" 

src="gallery/image2.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=this.src" 

src="gallery/image3.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=this.src" 

src="gallery/image4.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=this.src" 

src="gallery/image5.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=this.src" 
    
<br>
</div>
    </div>
         </div>
          <div id="footer">
            
            <p>   
               Urban Outdoor Design, LLC &copy; 

2015  | All Rights Reserved
            </p>
         </div>
      </div>
   </body>
</html>

CSS 表:

body {
  background: url(../images/bg-body.jpg) repeat;
  color: #A7A238;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  margin: 0;
  min-width: 940px;
  padding: 0;
}
a {
  outline: none;
}
img {
  border: 0;
}
p {
  margin: 0;
  text-align: justify;
}
p a {
  color: #356618;
}
p a:hover {
  color: #66a143;
}
#page {
  background: #840D22;
  margin: 0 auto;
  padding: 0 20px;
  width: 900px;
}
#header {
  background: #ffffff;
  height: 151px;
}
#header a#logo {
  display: block;
  height: 86px;
  padding: 15px 0 0 20px;
}
#header a#logo img {
  display: block;
  margin: 0 auto;
}
#header > ul {
  background: #4b4b4b;
  height: 49px;
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 900px;
}
#header > ul > li {
  float: left;
  position: relative;
  width: 150px;
}
#header > ul > li > a {
  color: #f0f2c9;
  display: block;
  letter-spacing: 0.1em;
  line-height: 49px;
  text-align: center;
  text-decoration: none;
}
#header > ul > li.current > a,
#header > ul > li.current > a:hover,
#header ul li ul li.current a,
#header ul li ul li.current a:hover {
  background: #840d22;
  color: #f0f2c9;
}
#header ul li a:hover {
  background: #daead0;
  color: #1b330c;
}
#header ul li ul {
  list-style: none;
  left: -99999px;
  margin: 0;
  overflow: visible;
  padding: 11px 0 0;
  position: absolute;
  top: 49px;
  width: 150px;
  z-index: 2;
}
#header ul li:hover ul {
  left: 0;
  top: 49px;
}
#header ul li ul li {
  background: #4B4B4B;
}
#header ul li ul li a {
  color: #f0f2c9;
  display: block;
  line-height: 31px;
  text-align: center;
  text-decoration: none;
}
#body {
  background: #ffffff;
}
#body div.header {
  height: 410px;
}
#body div.header div {
  position: relative;
}
#body div.header div a img,
#body div.header ul li a.figure img,
#body div.body ul li a img {
  display: block;
  filter: alpha(opacity=100);
  /* Needed for IE8 and old versions */
  opacity: 1;
}
#body div.header div a img:hover,
#body div.header ul li a.figure img:hover,
#body div.body ul li a img:hover {
  filter: alpha(opacity=90);
  /* Needed for IE8 and old versions */
  opacity: 0.9;
}
#body div.header div div {
  background: url(../images/bg-description.png) repeat-x;
  height: 75px;
  bottom: 0;
  position: absolute;
  padding: 17px 20px;
  left: 0;
  width: 860px;
}
#body div.header div div h1 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: normal;
  margin: 0;
  text-transform: uppercase;
}
#body div.header div div h1 a {
  color: #e3e699;
  text-decoration: none;
}
#body div.header div div h1 a:hover {
  color: #ffffff;
}
#body div.header div div p {
  color: #ffffff;
  letter-spacing: 0.028em;
  line-height: 24px;
}
#body div.header div div p a.continue {
  background: url(../images/interface.png) no-repeat -400px 0;
  display: inline-block;
  height: 20px;
  left: 3px;
  position: relative;
  top: 5px;
  width: 20px;
}
#body div.header div div p a.continue:hover {
  background: url(../images/interface.png) no-repeat -400px -20px;
}
#body div.header ul {
  background: #356618;
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 10px 0;
}
#body div.header ul li {
  background: url(../images/separator1.png) repeat-y;
  float: left;
  overflow: hidden;
  padding: 9px 20px 7px 0;
  width: 280px;
}
#body div.header ul li:first-child {
  background: none;
}
#body div#content ul.section li img,
#body div.header ul li a.figure {
  display: block;
  float: left;
}
#body div.header ul li a.figure img {
  display: block;
  border: 1px solid #ffffff;
  margin: 0 20px 0;
}
#body div.header ul li.current h3 a {
  color: #e3e699;
}
#body div.header ul li h3 {
  font-size: 16px;
  font-weight: normal;
  line-height: 13px;
  letter-spacing: 0.028em;
  margin: 0;
  padding: 0 0 10px;
}
#body div.header ul li h3 a {
  color: #e3e699;
  text-decoration: none;
}
#body div.header ul li h3 a:hover {
  color: #ffffff;
}
#body div.header ul li p {
  color: #ffffff;
  letter-spacing: 0.022em;
  line-height: 18px;
  text-align: left;
}
#body div.body {
  padding: 23px 20px 0;
}
#body div.body h1,
#body div.footer div h1 {
  background: #dce9d4;
  border-bottom: 2px solid #b3cca4;
  color: #836145;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 18px;
  font-weight: normal;
  height: 37px;
  line-height: 37px;
  margin: 0;
  padding: 0 0 0 20px;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px #ffffff;
}
#body div.body ul {
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 21px 0;
}
#body div.body ul li {
  float: left;
  margin: 0 0 0 20px;
  width: 200px;
}
#body div.body ul li:first-child,
#body div#content ul.section li:first-child,
#body div#content div#sidebar div ul li:first-child {
  margin: 0;
}
#body div.body ul li h2 {
  color: #836145;
  font-size: 16px;
  font-weight: normal;
  margin: 0;
  padding: 24px 0 10px;
  text-transform: uppercase;
}
#body div.body ul li p {
  color: #4b4b4b;
  letter-spacing: 0.028em;
  line-height: 24px;
  text-align: left;
}
#body div.footer {
  border-top: 1px solid #d7d6cd;
  margin: 0 20px;
  overflow: hidden;
  padding: 23px 0;
}
#body div.footer img {
  display: block;
  float: left;
}
#body div.footer div {
  float: right;
  width: 540px;
}
#body div.footer div ol {
  margin: 0;
  padding: 20px 0 0 20px;
}
#body div.footer div ol li {
  color: #4b4b4b;
  font-weight: bold;
  margin: 10px 0;
}
#body div.footer div ol li p {
  font-weight: normal;
  letter-spacing: 0.028em;
  line-height: 24px;
}
#body div#content {
  border-top: 1px solid #5d8546;
  overflow: hidden;
  padding: 35px 20px;
}
#body div#content h1 {
  color: #818181;
  font-size: 20px;
  letter-spacing: 0.028em;
  margin: 0;
  text-transform: uppercase;
}
#body div#content h3 {
  color: #836145;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 0.028em;
  line-height: 24px;
  margin: 0;
  padding: 30px 0 0;
}
#body div#content h3.first {
  padding: 12px 0 0;
}
#body div#content p {
  letter-spacing: 0.028em;
  line-height: 24px;
  padding: 25px 0 0;
}
#body div#content ul.section {
  list-style: none;
  margin: 0;
  padding: 29px 0 0;
}
#body div#content ul.section li {
  margin: 35px 0 0;
  overflow: hidden;
}
#body div#content ul.section li span {
  display: block;
  float: left;
}
#body div#content ul.section li div {
  float: right;
  width: 520px;
}
#body div#content ul.section li div h2,
#body div#content div#article h2 {
  color: #836145;
  font-size: 16px;
  letter-spacing: 0.028em;
  line-height: 13px;
  margin: 0;
}
#body div#content ul.section li div p {
  padding: 23px 0 0;
}
#body div#content form {
  margin: 0;
  padding: 30px 0 0;
}
#body div#content form p {
  color: #818181;
  padding: 0 0 25px;
}
#body div#content form label {
  display: block;
  margin: 20px 0;
  overflow: hidden;
}
#body div#content form label span:first-child {
  background: none;
  color: #836145;
  float: left;
  height: auto;
  text-transform: uppercase;
  width: 200px;
}
#body div#content form label span {
  background: url(../images/interface.png) no-repeat;
  display: block;
  float: left;
  height: 19px;
  width: 320px;
}
#body div#content form label span input {
  background: none;
  border: none;
  color: #818181;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  height: 17px;
  letter-spacing: 0.028em;
  line-height: 17px;
  margin: 1px 0 0 2px;
  padding: 0;
  width: 316px;
}
#body div#content form label span.message {
  background: url(../images/interface.png) no-repeat 0 -25px;
  height: 151px;
}
#body div#content form label span.message textarea {
  background: none;
  border: none;
  color: #818181;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  height: 147px;
  letter-spacing: 0.028em;
  margin: 2px 0 0 2px;
  overflow: auto;
  padding: 0;
  resize: none;
  width: 316px;
}
#body div#content form input#send {
  background: url(../images/interface.png) no-repeat -331px -56px;
  border: none;
  color: #ffffff;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  height: 25px;
  letter-spacing: 0.028em;
  line-height: 25px;
  margin: 0 0 0 440px;
  text-align: center;
  text-shadow: 1px 1px 1px #514b61;
  text-transform: uppercase;
  width: 80px;
}
#body div#content form input#send:hover {
  background: url(../images/interface.png) no-repeat -331px -81px;
}
#body div#content div#article {
  border-right: 1px solid #96b285;
  float: left;
  padding: 0 20px 0 0;
  width: 580px;
}
#body div#content div#article img {
  display: block;
  margin: 0 0 35px;
}
#body div#content div#article h1 {
  padding: 0 0 17px;
}
#body div#content div#article h2 {
  line-height: 24px;
}
#body div#content div#article span {
  color: #818181;
  display: block;
  letter-spacing: 0.028em;
  line-height: 24px;
}
#body div#content div#sidebar {
  float: right;
  width: 242px;
}
#body div#content div#sidebar h3 {
  color: #818181;
  font-weight: bold;
  line-height: normal;
  padding: 0 0 15px;
  text-transform: uppercase;
}
#body div#content div#sidebar div {
  border-top: 1px solid #96b285;
  padding: 20px 0;
}
#body div#content div#sidebar div:first-child {
  border: none;
  padding: 0 0 20px;
}
#body div#content div#sidebar div ul,
#footer div div ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#body div#content div#sidebar div ul li {
  color: #818181;
  letter-spacing: 0.028em;
  line-height: 24px;
}
#body div#content div#sidebar div ul li a {
  color: #818181;
  text-decoration: none;
}
#body div#content div#sidebar div ul li a:hover {
  color: #4b4b4f;
}
#body div#content div#sidebar div:first-child ul li {
  letter-spacing: 0.024em;
  line-height: 18px;
  margin: 15px 0 0;
}
#body div#content div#sidebar div p {
  color: #818181;
  padding: 0;
}
#footer {
  background: #dce9d4;
  border-top: 1px solid #b8d0aa;
}
#footer div {
  height: 174px;
  overflow: hidden;
}
#footer div div {
  border-left: 1px solid #b8d0aa;
  float: left;
  height: 134px;
  padding: 20px 20px;
  width: 180px;
}
#footer div div:first-child {
  border: none;
}
#footer div div h1 {
  color: #8c8c8c;
  font-size: 18px;
  font-weight: normal;
  margin: 0;
  padding: 0 0 13px;
  text-shadow: 1px 1px 1px #ffffff;
  text-transform: uppercase;
}
#footer div div ul li a {
  letter-spacing: 0.028em;
  line-height: 18px;
}
#footer div div a {
  color: #8c8c8c;
  display: block;
  letter-spacing: 0.05em;
  text-decoration: none;
}
#footer div div a:hover {
  color: #4b4b4f;
}
#footer div div a#mail {
  background: url(../images/icons.png) no-repeat;
  height: 14px;
  line-height: 14px;
  margin: 0 0 10px;
  padding: 0 0 0 30px;
}
#footer div div a#facebook {
  background: url(../images/icons.png) no-repeat 0 -38px;
  height: 20px;
  line-height: 20px;
  margin: 0 0 10px;
  padding: 0 0 0 30px;
}
#footer div div a#twitter {
  background: url(../images/icons.png) no-repeat 0 -88px;
  height: 18px;
  line-height: 18px;
  margin: 0 0 10px;
  padding: 0 0 0 30px;
}
#footer div div a#googleplus {
  background: url(../images/icons.png) no-repeat 0 -134px;
  height: 20px;
  line-height: 20px;
  margin: 0 0 10px;
  padding: 0 0 0 30px;
}
#footer div div a#mail:hover {
  background: url(../images/icons.png) no-repeat 0 -14px;
}
#footer div div a#facebook:hover {
  background: url(../images/icons.png) no-repeat 0 -58px;
}
#footer div div a#twitter:hover {
  background: url(../images/icons.png) no-repeat 0 -106px;
}
#footer div div a#googleplus:hover {
  background: url(../images/icons.png) no-repeat 0 -154px;
}
#footer p {
  background: #840D22;
  color: #ffffff;
  height: 37px;
  line-height: 37px;
  text-align: center;
  text-shadow: 1px 1px 1px #8da181;
}

这是一个链接，指向它应该是什么样子的屏幕截图。它适用于 Firefox。将鼠标悬停在右侧的缩略图上时，它会在正文的空白处打开一个大版本的图像。

http://www.image-share.com/ijpg-2876-171.html

感谢您的帮助!

最佳答案

您可以将其用于您的鼠标悬停将使它在 firefox 和 chrome 中工作

onmouseover="document.getElementById('preview').src=this.src"

据我所知，在这种情况下，firefox 似乎可以将 id 变量应用于 javascript preview将自动获得一个 id，而 chrome 不会这样做。

编辑:

替换你的鼠标悬停

<img onmouseover="preview.src=this.src" src="gallery/image1.jpg" alt="Image Not Loaded"/>

改为

 <img onmouseover="document.getElementById('preview').src=this.src" src="gallery/image1.jpg" alt="Image Not Loaded"/>

编辑 2:

要获取该区域中已有的第一张图像，只需添加 src=""到 <img />在左边的 div 里面，见下图:

<div id="content">
  <div id="left">
    <img id="preview" class="preview" src="http://d.ibtimes.co.uk/en/full/1409516/how-update-nexus-5-official-android-5-0-lollipop-build-lrx21o-via-factory-image.jpg">
   </div>

关于html - 网页样式问题，适用于 firefox，不适用于 ie 或 chrome，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28904281/

上一篇：javascript - 如何在 div 中放置按钮和内联搜索输入

下一篇：css - 居中我的网页选项卡

相关文章：

jquery - 我的全屏菜单不起作用。我做错了什么？

javascript - 如何使用 CSS 创建运行文本(跑马灯)

javascript - 悬停时显示前一个元素

jquery - css/jquery 冲突但无法找到它

html - CSS3 @font-face 不能使用受版权保护的字体或某些字体吗？

css - 如何访问通过页面上的 iframe 加载的 CSS 类

javascript - 我可以有两个具有相同属性名称的对象吗？

html - 我的 Css 和 HTML 没有链接在一起，我不确定为什么

css - 我如何让我的固定元素独立而不在其他内容之上？

javascript - 如何在我的 jQuery 导航菜单中正确定位箭头？

©2024 IT工具网  联系我们