近期工作中遇到的零碎小问题

 

今天想把这段时间里遇到的一些零碎问题总结一下,巩固一下知识.

 

一、关闭文本输入框的自动完成功能

在完成搜索下拉suggestkey word 的功能时,我发现双击文本输入框时,浏览器会从你以前的同名输入框的历史记录中查找出类似的内容并列在输入框下面,这样就不用全部输入进去了,直接选择列表中的项目就可以了。这是HTML输入框的自动完成功能,可我们要做的suggest 是要从数据库取出suggest关键字,而不是显示输入的历史记录,这时我们会想关掉输入框的自动完成功能

搜索了一下,关掉这个功能的方法有3种:

1、普通情况,即默认情况,AutoComplete是打开的,在【IE-工具-内容-自动完成】选项里面设置即可。 

2、有时候我们并不需要AutoComplete,例如需要用户自己再次输入而非自动完成。只要将所在表单元素的autocomplete属性设置为off即可。     
      <form><input type="text" name="textfield" autocomplete="off"></form> 

3、那么,如果所有表单元素都不想使用autocomplete功能呢?设置form的autocomplete为"on"或者"off"来开启或者关闭自动完成功能;如: 
    <form autocomplete="off"><input type="text" name="textfield"></form> 

 

二、锚点在ie6中失效,解决办法是触发hasLayout

在做活动页面的时候,我们常有这样的需求:实现一个右漂浮锚点链接层,来定位楼层。

实现起来很简单,就是将右飘浮层的a链接的href定位到相对应的楼层,楼层里都布下“埋伏”好的锚点,此锚点(我们暂且将其称作目标锚点)的name属性或者id属性和指向此的链接href属性一一对应。一般来说,我们都会把“埋伏”隐藏好:

 

.anchor{
  display:block;
  text-indent:-1000em;  
  width:0;
  height:0;
  opacity:0;
  filter:alpha(opacity=0);  
  visibility:hidden;  
}

 

这里边有些代码是没必要的,但是为了保险,我平时都一一写上,但是有一次我为了省代码,就省去了display:block;width:0;height:0;后来发现在ie6下点击链接,页面焦点不跳转到相应的楼层,也就是目标锚点失效了,搜索了下,果断也有人和我遇到了相同的问题,解决方案是触发ie的hasLayout便能解决 ,于是乖乖按照原来的写法写上

深入地了解:由锚点失效引发的hasLayout探究 好在ie6行将就木,这个问题了解了解就行...

 

三  img底下出现缝

活动页面经常出现大尺寸banner,一刀切很快,但是图片要用高清的,一大尺寸图体积都大到500~600kb,加载速度慢。所以一般都划分开,

<ul>
    <li><img src="images/banner_01.jpg"/></li>
    <li><img src="images/banner_02.jpg"/></li>
    <li><img src="images/banner_03.jpg"/></li>
   <li><img src="images/banner_04.jpg"/></li>
</ul>

但是这样在没进行任何css reset的情况下图片和图片之间会出现裂缝,看着十分不和谐。后来翻了下,这个问题其实经常出现,EDM(表格里的图片嵌套)也常有。解决的办法很简单,这里我先不说,因为我想让大家看到背后的原因。已经有很多大牛解释过这样的问题,传送门:

<img>元素底部为何有空白

 

四 EDM相关

虽然组里为了减轻前端负担已将EDM做成模板,但曾经为EDM头疼的问题还是值得了解下

治愈邮件兼容性的「民间偏方」

知乎:为什么不能在 EDM 模版中使用 DIV ?

 

这篇文章先到此,至今技术积累的还不够,所以在写相关的文章时,总是倾向于充当编辑的角色,因为已经存在的出色的文章应该让更多的人知道,然后在这个基础上如果有更加生动的传达信息的方式,或者有新的观点再发表自己的见解会更好...另外,这两天google根本上不去,估计是因为扫黄净网活动闹得,百度不尽人意,正在尝试duckduckgo搜索,感觉还不错~

posted @ 2014-06-02 22:31  FreeLesley  阅读(243)  评论(0编辑  收藏  举报