cat鱼 - 第1部分

>本文解释了如何创建一个持久的“ catfish”广告横幅，即使在滚动时，该横幅仍在网页的底部仍然可见。 该技术结合了CSS和JavaScript，以及用于Internet Explorer的特殊处理。

密钥概念：

>
• 持续的底部横幅：核心功能是使用CSS（）放置在页面底部的DIV元素。 position: fixed
跨浏览器兼容性：使用
• 的初始CSS方法在Internet Explorer的较旧版本中不起作用。 该解决方案涉及有条件的注释和DOM操纵，以仅为IE添加包装器Div（进行横幅，在包装器中管理滚动。position: fixed div#zipposition: absolute> ie特定的处理：自定义的JavaScript函数（overflow: auto）动态地将包装器div注入IE DOM中，确保兼容性而不会影响其他浏览器。
• >条件注释：这些注释允许特定于浏览器的CSS和JavaScript包含。 这样可以确保只有IE收到修复所需的额外标记。> wrapFish有效的标记：仅添加了Internet Explorer的额外DIV和相关样式，避免了其他浏览器的不必要的膨胀。>
• 代码片段：

>以下代码段说明了使用的CSS和JavaScript。 请注意，这是一个简化的演示版本。

>

：

： catfish.css

#catfish {
  position: fixed;
  bottom: 0;
  background: transparent url(images/catfish-tile.gif) repeat-x left bottom;
  padding: 0;
  height: 79px; /* includes transparent part */
  cursor: pointer;
  margin: 0;
  width: 100%;
}

html {
  padding: 0 0 58px 0; /* 58px = height of the opaque part of the Catfish */
}

： IEhack.css

div#zip {
  width: 100%;
  padding: 0;
  margin: 0;
  height: 100%;
  overflow: auto;
  position: relative;
}

有条件注释（示例）：

catfish.js这种方法可确保跨浏览器的一致用户体验，同时最大程度地减少不必要的代码。 进一步的改进，例如有条件的横幅选择和放置控制，将增强功能。

以上是cat鱼 - 第1部分的详细内容。更多信息请关注PHP中文网其他相关文章！