AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

web开发未解之谜

2017-12-05 1118
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

ie7的li:hover问题

<! 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"  lang ="zh-CN" >  
 < head >  
 </ head >  
 < body >
< style  type ="text/css" >   
#list span  {  left : -999em ; position :  absolute ;   }  
#list:hover span, #list.on span  {  left : auto ;   }
</ style >  
 < ul >  
 < li  id ="list" > 产品介绍 < span > 产品一 </ span >   
 </ li >  
 </ ul >  
 < input  type ="text" />
< script >
var  o  =  document.getElementById( " list " ); 
o.onmouseover = function () {  this .className = " on " ; }
o.onmouseout = function () {  this .className = "" ; } 
 </ script >  
 </ body >  
 </ html >

 ie6和ff都很正常

但ie7就有问题，当把光标放在文本框中，然后再把鼠标放在菜单上，弹出来的菜单就不会消失了

解决方法是去掉#list:hover或者加一个样式在onmouseout中设置

但未知什么原因

ie6的line-height失效问题

<! 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 >
</ head >
< body >
< p  style ="line-height:30px;" >  服务：
   < input  name =""  type ="text" />
   < br  />
  特别推荐：
   < input  name =""  type ="text" />
   < br  />
  交通停车：
   < input  name =""  type ="text" />
</ p >
</ body >
</ html >

ie7和ff显示正常 
但ie6的line-height就没效果

未知解决方法，未知原因

ie高度设置问题

<! 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=gb2312"   />
< title > 无标题文档 </ title >
< body >
< style  type ="text/css" >
* {  padding : 0px ;  margin : 0px ; }
html,body { overflow : hidden ; height : 100% ;  width : 100% ; }
</ style >
< table  style ="width:100%; height:100%;"  border ="1"  cellspacing ="0"  cellpadding ="0" >
   < tr >
     < td  style ="height:100px;" > 22222222222 </ td >
   </ tr >
   < tr >
     < td > mid </ td >
   </ tr >
   < tr >
     < td  style ="height:100px;" > 111111111 </ td >
   </ tr >
</ table >
</ body >
</ html >

这是一个全屏的三层样式

ff的效果应该是正确的 
但在ie里上下两块的高度都不是设定的100px

未知原因，未有解决方法

 js的正则问题

function  a(val) 
{ 
   var  re  =   / ^\d+$ / g;
  alert(re.lastIndex);
   return  re.test(val); 
} 
alert(a( 5 )); 
alert(a( 6 ));

用ie的话是0 true 0 true 
用ff的话是0 true 1 false

原因没有弄清楚

不过直接用new RegExp的方法能解决

ie透明背景问题

<div style="border:1px solid #000; height:100px; width:100px; position:absolute;" onclick="alert(1)">
click
</div>

ff中正常，在ie中点击div中文字以外的部分会没反应。

如果有background-color就没问题，未知原因。

document.body.appendChild()导致IE已终止操作

以下代码会导致在ie出错“已终止操作”，ff中是没问题的：

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div>
<script type="text/javascript">
document.body.appendChild(document.createElement("div"));
</script>
</div>
</body>
</html>

但脚本如果不套在div里面又没问题，

未知原因，估计跟dom有关（网上说是跟body的加载顺序有关）。

解决方法是body加载完之后执行(ie特有的document.body.onload)，或用insertBefore代替，例如：

document.body.insertBefore(obj, document.body.childNodes[ 0 ]);

ie的table的td的宽度问题

<!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=gb2312" />
<title>无标题文档</title>
</head>
<body>
<table border="1" cellspacing="1" cellpadding="1" width="600">
    <tr>
      <td width="100" align="right"> 后面空了： </td>
      <td> 内容内容内容内容内容内容内容 </td>
    </tr>
    <tr>
      <td colspan="2"> 温馨提示：温馨提示 温馨提示 温馨提示 温馨提示 </td>
    </tr>
</table>
<br /><br />
<table border="1" cellspacing="1" cellpadding="1" width="600">
    <tr>
      <td width="100" align="right"> 后面空了： </td>
      <td> 内容内容 </td>
    </tr>
    <tr>
      <td colspan="2"> 温馨提示：温馨提示 温馨提示 温馨提示 温馨提示 </td>
    </tr>
</table>
<br /><br />
<table border="1" cellspacing="1" cellpadding="1" width="600">
    <tr>
      <td width="100" align="right"> 正常正常：</td>
      <td> 内容内容内容内容内容内容内容 </td>
    </tr>
        <tr>
      <td colspan="2"> 温馨提示：温馨提示 温馨提示 温馨提示 </td>
    </tr>
</table>
</body>
</html>

以上3个table的结构是一样的其中都有一个td是100宽度只是内容不同，
在ff中3个table显示的效果是一样的，但用ie看会发现第一第二个table会无端多出一段空白 
解决方法：给table添加样式table-layout:fixed;，未定义时，单元格宽度会按内容宽度的比例自动调整。

ie6/7的hr行距问题

<! 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 " >
< body >
1111111111111111111111111111111
< hr style = " margin:0; padding:0; "/ >
22222222222222222222222222222222
< / body>
< / html>

即使给hr设置了margin和padding都是0，但ie6和ie7还有有一个间距。
未知原因，未找到解决方法，建议用div的border模拟。

IE8的链接触发问题

<! 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 >
< style type = " text/css " >
a:hover {
    background:# 000 ;
}
 < / style>
< / head>
< body >
< div style = " border:1px solid #1633bf; " >   < a href = " # " > 测试1 < / a> <a href="#">测试2< / a >   < / div>
< / body>
< / html>

用ie8鼠标在“测试2”后面移动，居然会触发“测试1”的hover。
未知原因，未有解决方法。
ie的a元素的innerHTML的bug
比较两次alert的结果：

<! DOCTYPE html >
< html >
< body >
< a id = " test1 "  href = " http://www.cnblogs.com/ " > hello@ 163 .net < / a>
< a id = " test2 "  href = " http://www.cnblogs.com/ " > hello# 163 .net < / a>
< script type = " text/javascript " >
alert(test1.innerHTML  +   " _ "   +  test2.innerHTML);
test1.href  =  test2.href  =   " http://cloudgamer.cnblogs.com/ " ;
alert(test1.innerHTML  +   " _ "   +  test2.innerHTML);
 < / script>
< / body>
< / html>

有@的链接，内容变成href的内容，未知原因，解决方法是在修改的链接前面加上一个空格（即：" "+href）。
ie6的!important的bug
ie6运行下面代码：

<! DOCTYPE html >
< html >
< body >
< style >
#t{font - size:20px}
.t{ font - size: 12px  ! important; }
 < / style>
< div id = " t "  class = " t " > test < / div>
< / body>
< / html>

可以看到是以12px显示的，可见!important能正常执行，再看下面代码：

<! DOCTYPE html >
< html >
< body >
< style >
.t{ font - size: 12px  ! important;font - size:20px}
 < / style>
< div class = " t " > test < / div>
< / body>
< / html>

这里却以20px显示，说明!important在这里失效了，该bug常用来对ie6做hack，但要注意只能用在同一个{}内。

ie6的图片宽高问题

测试一下代码：

< style >
img{width:100px; height:100px;}
 < / style>
< img id = " img "  style = " width:auto;height:auto; "   / >
< script >
img.onload  =   function (){
     this .onload  =   null ;
     this .src  =   " http://www.baidu.com/img/lm.gif "
}
img.src  =   " http://www.baidu.com/img/baidu_logo.gif "
< / script>

除了ie6在第二次载入时都能自动恢复尺寸。

ie6却在第一次载入时尺寸就定住不变了，未知解决方法。

ie8的table问题

  运行以下代码：

<! DOCTYPE html >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 "   / >
< / head>
< body >
< table border = " 1 " >
     < thead >
         < tr >
             < td > test < / td>
         < / tr>
     < / thead>
     < tr id = " t " >
         < td > test < / td>
     < / tr>
     < tr >
         < td > test < / td>
     < / tr>
< / table>
< br >
< input id = " del "  type = " button "  value = " del " >
< script >
document.getElementById( " del " ).onclick  = function (){
     var  t  = document.getElementById( " t " )
    t.parentNode.removeChild(t);
}
 < / script>
< / body>
< / html>

 除了ie8，tr在remove后都能向上填充位置。

ie8却定在那里不动，解决方法是在移除后触发table的reflow，例如设置table的className。

ie6/7的clientTop的问题

运行以下代码：

<! DOCTYPE html >
< html >
< body >
< div id = " test "  style = " border:10px solid #000 " > test </ div >
< script >
var elem  =  document.getElementById( " test " )
elem.style.position  =   " absolute " ;
width  =  elem.clientTop;
elem.style.display  =   " none " ;
alert(elem.clientTop)
 </ script >
</ body >
</ html >

一般来说display为 "none"之后clientTop应该是0
但ie6 7却还会弹出10

本文转自博客园cloudgamer的博客，原文链接：web开发未解之谜，如需转载请自行联系原博主。

文章标签：
前端开发
JavaScript
关键词：
web开发
青夜之衫
目录
相关文章
凉凉心.
|
2月前
|
算法 Java Go
【GoGin】（1）上手Go Gin 基于Go语言开发的Web框架，本文介绍了各种路由的配置信息；包含各场景下请求参数的基本传入接收
gin 框架中采用的路优酷是基于httprouter做的是一个高性能的 HTTP 请求路由器，适用于 Go 语言。它的设计目标是提供高效的路由匹配和低内存占用，特别适合需要高性能和简单路由的应用场景。
凉凉心.
271 4
游客u6vcprrm3r23y
|
6月前
|
缓存 JavaScript 前端开发
鸿蒙5开发宝藏案例分享---Web开发优化案例分享
本文深入解读鸿蒙官方文档中的 `ArkWeb` 性能优化技巧，从预启动进程到预渲染，涵盖预下载、预连接、预取POST等八大优化策略。通过代码示例详解如何提升Web页面加载速度，助你打造流畅的HarmonyOS应用体验。内容实用，按需选用，让H5页面快到飞起！
游客u6vcprrm3r23y
306 0
游客u6vcprrm3r23y
|
6月前
|
JavaScript 前端开发 API
鸿蒙5开发宝藏案例分享---Web加载时延优化解析
本文深入解析了鸿蒙开发中Web加载完成时延的优化技巧，结合官方案例与实际代码，助你提升性能。核心内容包括：使用DevEco Profiler和DevTools定位瓶颈、四大优化方向（资源合并、接口预取、图片懒加载、任务拆解）及高频手段总结。同时提供性能优化黄金准则，如首屏资源控制在300KB内、关键接口响应≤200ms等，帮助开发者实现丝般流畅体验。
游客u6vcprrm3r23y
240 0
游客u6vcprrm3r23y
|
前端开发 JavaScript Shell
鸿蒙5开发宝藏案例分享---Web页面内点击响应时延分析
本文为鸿蒙开发者整理了Web性能优化的实战案例解析，结合官方文档深度扩展。内容涵盖点击响应时延核心指标（≤100ms）、性能分析工具链（如DevTools时间线、ArkUI Trace抓取）以及高频优化场景，包括递归函数优化、网络请求阻塞解决方案和setTimeout滥用问题等。同时提供进阶技巧，如首帧加速、透明动画陷阱规避及Web组件初始化加速，并通过优化前后Trace对比展示成果。最后总结了快速定位问题的方法与开发建议，助力开发者提升Web应用性能。
游客u6vcprrm3r23y
257 0
枫叶丹4
|
6月前
|
JSON 开发框架 自然语言处理
【HarmonyOS Next之旅】基于ArkTS开发(三) -＞ 兼容JS的类Web开发(三)
本文主要介绍了应用开发中的三大核心内容：生命周期管理、资源限定与访问以及多语言支持。在生命周期部分，详细说明了应用和页面的生命周期函数及其触发时机，帮助开发者更好地掌控应用状态变化。资源限定与访问章节，则聚焦于资源限定词的定义、命名规则及匹配逻辑，并阐述了如何通过 `$r` 引用 JS 模块内的资源。最后，多语言支持部分讲解了如何通过 JSON 文件定义多语言资源，使用 `$t` 和 `$tc` 方法实现简单格式化与单复数格式化，为全球化应用提供便利。
枫叶丹4
264 104
枫叶丹4
|
6月前
|
JavaScript 前端开发 API
【HarmonyOS Next之旅】基于ArkTS开发(三) -＞ 兼容JS的类Web开发(二)
本文介绍了HarmonyOS应用开发中的HML、CSS和JS语法。HML作为标记语言，支持数据绑定、事件处理、列表渲染等功能；CSS用于样式定义，涵盖尺寸单位、样式导入、选择器及伪类等特性；JS实现业务逻辑，包括ES6语法支持、对象属性、数据方法及事件处理。通过具体代码示例，详细解析了页面构建与交互的实现方式，为开发者提供全面的技术指导。
枫叶丹4
286 104
枫叶丹4
|
6月前
|
开发框架 编解码 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(三) -＞ 兼容JS的类Web开发(一)
该文档详细介绍了一个兼容JS的类Web开发范式的方舟开发框架，涵盖概述、文件组织、js标签配置及app.js等内容。框架采用HML、CSS、JavaScript三段式开发方式，支持单向数据绑定，适合中小型应用开发。文件组织部分说明了目录结构、访问规则和媒体文件格式；js标签配置包括实例名称、页面路由和窗口样式信息；app.js则描述了应用生命周期与对象管理。整体内容旨在帮助开发者快速构建基于方舟框架的应用程序。
枫叶丹4
288 102
游客u6vcprrm3r23y
|
7月前
|
Web App开发 前端开发 JavaScript
鸿蒙5开发宝藏案例分享---Web适配一多开发实践
这是一份实用的鸿蒙Web多设备适配开发指南，针对开发者在不同屏幕尺寸下的布局难题提供了解决方案。文章通过三大法宝（相对单位、媒体查询和窗口监听）详细介绍如何实现智能适配，并提供了多个实战案例，如宫格布局、对话框变形和自适应轮播图等。此外，还分享了调试技巧及工具推荐，帮助开发者快速上手并优化性能。最后鼓励读者实践探索，并提示更多官方资源等待发现。
游客u6vcprrm3r23y
319 0
百岁001
|
9月前
|
关系型数据库 MySQL 数据库
基于Flink CDC 开发，支持Web-UI的实时KingBase 连接器，三大模式无缝切换，效率翻倍！
TIS 是一款基于Web-UI的开源大数据集成工具，通过与人大金仓Kingbase的深度整合，提供高效、灵活的实时数据集成方案。它支持增量数据监听和实时写入，兼容MySQL、PostgreSQL和Oracle模式，无需编写复杂脚本，操作简单直观，特别适合非专业开发人员使用。TIS率先实现了Kingbase CDC连接器的整合，成为业界首个开箱即用的Kingbase CDC数据同步解决方案，助力企业数字化转型。
百岁001
2019 5
基于Flink CDC 开发，支持Web-UI的实时KingBase 连接器，三大模式无缝切换，效率翻倍！
大树营养快线
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序？
Django 框架凭借其强大的功能、稳定性和可扩展性，几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统，Django 都能提供可靠的支持，帮助开发者快速构建高质量的应用。同时，其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
大树营养快线
578 67

热门文章

最新文章

  • 1
    Windows Defender 导致 Web IIS 服务异常停止排查
  • 2
    Burp Suite Professional 2025.10 发布 - Web 应用安全、测试和扫描
  • 3
    百宝箱开放平台 ✖️ Web SDK
  • 4
    Burp Suite Professional 2025.10 for Windows x64 - 领先的 Web 渗透测试软件
  • 5
    Supervisor 、Supervisord-Monitor 的web统一管理安装、配置、使用
  • 6
    通过Web安全工具Burp suite找出网站中的XSS漏洞实战(二)
  • 7
    在web.config和app.config文件中增加自定义配置节点
  • 8
    怎么解决web service circular reference 问题
  • 9
    新手学web前端有哪些攻略？
  • 10
    Web开发中你注意这些前台开发问题了吗？(前台构架篇)
  • 1
    Burp Suite Professional 2025.10 for Windows x64 - 领先的 Web 渗透测试软件
    134
  • 2
    Windows Defender 导致 Web IIS 服务异常停止排查
    412
  • 3
    百宝箱开放平台 ✖️ Web SDK
    189
  • 4
    Burp Suite Professional 2025.10 发布 - Web 应用安全、测试和扫描
    275
  • 5
    《深入理解Spring》过滤器（Filter）——Web请求的第一道防线
    467
  • 6
    【GoGin】（0）基于Go的WEB开发框架，GO Gin是什么？怎么启动？本文给你答案
    387
  • 7
    【GoGin】（1）上手Go Gin 基于Go语言开发的Web框架，本文介绍了各种路由的配置信息；包含各场景下请求参数的基本传入接收
    271
  • 8
    EventLog Analyzer：高效的Web服务器日志监控与审计解决方案
    230
  • 9
    AppSpider 7.5.020 发布 - Web 应用程序安全测试
    99
  • 10
    如何轻松使用AWS Web应用程序防火墙？
    628

    • 相关课程

    更多
  • Python Web开发基础
  • Java Web开发系列课程 - Spring框架入门
  • 企业Web常用架构LAMP-LNMP实战
  • 高校精品课-西安交通大学-Web 编程技术
  • Java Web项目实战 - 图书商城
  • Java面试疑难点解析 - Java Web开发

    • 相关电子书

    更多
  • Web应用系统性能优化
  • 高性能Web架构之缓存体系
  • PWA:移动Web的现在与未来
    • 下一篇
    一文了解：阿里云对象存储OSS是什么？