关于IE10以下的img标签问题解决_心得技巧_网页制作

来源:脚本之家  责任编辑:小易  

插入图片可以使用img标签来实现。1、新建百html文件,如图所示,在body标签中插入img标签,需要注意的是,img在html中没有结束标签,所以不需要添加度“”。给标签添加“src”属性,属性值填写想要添加图片的路径,这里以和html同一目录下的1.png为例,这样图片就插入完成了:2、为了防止用户知浏览网页时无法加载图片,可以给img标签添加“道alt”属性,这个属性可以在图片加载失败时显示出来以告诉用户这里是张什么图片,还可以在用内户将鼠标放在图片上是显示提示信息,这里以属性值“鹦鹉”为例:3、img标签中插入容的图片宽和高默认是图片自身的宽和高,如果想要自定义宽和高的话,可以用“width”和“height”来控制,这里以宽和高都是200为例,为width”和“height”设置属性值为“200”:www.zgxue.com防采集请勿采集本网。

发现问题

找到对应的img标签,alt=\"图片无法显示 解释:根据国际万维网联盟(W3C)标准,图片必须要有alt属性,alt属性是当图片无法显示(加载失败)时显示的提示内容,但是即使没有这个属性,绝大

之前写过的一段简单的demo,后来在IE10以下使用的时候发现无法使用,先上一段代码

1、元素的嵌套 百 在 XHTML 中,所有的元素必度须正确地嵌套。2、文档内根元素差异 空标签也必须使用结束标签,或者其开始标签必须使用/>结尾。参考资料来源:百度百科-HTML 百度百科-XHTML

HTML:

1、网页中添加图片html代码,使用<img src=\"图片地址.jpg\"> img>标签的 src 属性是必需的。它的值是图像文件的 URL,也就是引用该图像的文件的的绝对路径或相对路径。另外也可以添加高度width

<div class="all" id="box"> <img id="image" src="psb.png" width="512" height="1470" > <span id="up"></span> <span id="down"></span></div>

有一些变化,比如插入一只手表示可以手洗,标注30℃等温度表示水温必须控制在这个温度以下。2、氯漂基本符号 大多数是在上面打×,表示不能氯漂。氯漂剂 chlorine bleach:在溶液中释放出次氯酸根离子的

CSS:

接着给标签设置背景图片,这里小编设置的是标签。接着新建一个css文件,如图问,小编命名为“1.css”。这里给body标签设置background-size属性,如果你的标签是div就写div,然后可以设置宽度和高度。如图

.all{ position: relative; width: 512px; height: 400px; border: 1px solid #000; margin:100px auto; overflow: hidden;}span{ width: 512px; height: 200px; position: absolute; left: 0; top: 0; cursor: pointer;}#down{ top: auto; bottom: 0; }

JS:

var ops = document.getElementById('image'), oup = document.getElementById('up'), odown = document.getElementById('down'), obox = document.getElementById('box'), timer = null; num = 0;oup.onmouseover = function(){ clearInterval(timer); timer = setInterval(function(){ num -= 4; if(num < -1070){ num = -1070; clearInterval(timer); } ops.style.marginTop = num+'px'; },30)}odown.onmouseover = function(){ clearInterval(timer); timer = setInterval(function(){ num += 4; if(num > 0){ num = 0; clearInterval(timer); } ops.style.marginTop = num+'px'; },30)}obox.onmouseout = function(){ clearInterval(timer);}

实现的效果就是当鼠标移动到上面span的时候,图片向上移动,移动到下面span的时候,图片向下移动,离开则停止。

然而在IE10以下版本鼠标移上span的时候没有任何效果。

进过多次测试,发现了两种解决办法

方法一:

进过测试发现如果给span加上背景颜色的话, 鼠标移上又有效果了

增加代码:

background: #fff; opacity: 0; filter:alpha(opacity=0);

添加背景色,然后设置为透明,因为opacity有兼容问题,所以加上filter,最后效果和之前完全一样

方法二:

后来问了朋友,说是img标签在IE10嵌套以下会有,所以把img标签放到div外面来

<img id="image" src="psb.png" width="512" height="1470" ><div class="all" id="box"> <span id="up"></span> <span id="down"></span></div>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对真格学网的支持。

src 图像的路径来alt 提示文字width 宽度height 高度dynsrc AVI文件的源路径loop AVI文件的播放次数loopdelay 播放延迟百start 播放方式lowsrc 低分辨率图片vsemap 映像地图alingn 图像与文字之度间的排列属性border 边框hspace 水平间距问vlign 垂直间距纯手工打字 谢谢采纳!答内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • img标签src属性值为空时2次请求问题(非ie浏览器)
  • ie下元素空白区域(该元素在上img在下)与图片重叠无法触发鼠标事件
  • 图片元素img在ie6下出现多余空白问题
  • ie img多余5像素空白解决方法
  • ie6图片元素img下出现多余空白的问题
  • 在ie流览器中正确显示png透明图片-css教程-网页制作-网页教学网
  • HTML中img的属性有哪些
  • HTML怎样插入图片
  • 10个字以内搞笑的话
  • 为什么新打开的网页不能自动弹出来,而是在当前网页的后面要自己再点开。怎么设置回去???
  • 存在没有alt信息的img标签,怎么办?
  • HTML和XHTML的区别是什么?
  • 添加图片的html代码
  • 衣服上的标签上有很多图标,想问一下都代表什么意思?
  • htmL中怎么插入背景图片如何设置背景图片大小
  • 怎样判断粤通卡电子标签是否正常
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作心得技巧ie10img标签img标签src属性值为空时2次请求问题(非ie浏览器)ie下元素空白区域(该元素在上img在下)与图片重叠无法触发鼠标事件图片元素img在ie6下出现多余空白问题 ie img多余5像素空白解决方法ie6图片元素img下出现多余空白的问题在ie流览器中正确显示png透明图片-css教程-网页制作-网页教学网html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧自适应网页设计的方法(手机端良好的访问体验)网站图标icon添加方法!在iframe框架中打开页面的方法限制input输入类型(多种方法实现)整理了12款javascript 表格控件(datagrid)网页常用分享代码大全(前端必备)新手建站入门教程帖⑦:做一个漂亮的网站就这么简单html中的input type="reset"标签失效(不起作用)的可能前端开发必备:12款浏览器兼容性测试工具推荐firefox浏览器中播放背景音乐的终极解决方案(chrome多div与div之间有空隙的解决方法rgba中的a是什么意思 css之rgba颜色指南颜色之argb与rgb、rgba的区别与介绍解决document.getelementby系列方法获取不到对象的问白话分析自适应跟响应式的区别详解网页编码之gb2312、gbk与utf-8的区别网页编码为什么不用gbk或者gb2312而用utf-8推荐一款酷炫闪烁的告警按钮关于带有"显示更多"按钮的多行文本截断思考跨浏览器问题的五种解决方案(小结)
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved