Web前端个人笔记（未完待续...）-白红宇

Web前端个人笔记（未完待续...）

阅读量：5743 次

发布时间：2019-06-18

本文共 2633 字，大约阅读时间需要 8 分钟。

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

如：一个text文本框，选中之后(获得焦点)在ie下面是正常显示而在谷歌等浏览器上有一个虚线框，很明显，这样很不美观，所以就要让它永不显示，这个时候就需要用到outline这个属性;

outline:none; 就可以隐藏这个虚线框. 亦可以自定义被激活时的样式：outline:1px solid red;

cursor:pointer; 鼠标移上去变手形状;

按回车键登录(或下个文本框获取焦点):

在每个文本框里面加入

onkeydown="keyLogin(event)"

这句话，然后在JS里，

function keyLogin(e) {  var k = window.event?window.event.keyCode:e.which;  if(k == 13){   $("#login-btn").click(); //调用登录按钮的登录事件   } }

即可实现回车键登录.

文字内容超出长度后，以省略号的形式显示:

white-space: nowrap; （不换行，一行显示） text-overflow: ellipsis; （溢出用省略号）-o-text-overflow: ellipsis;overflow: hidden; （多出的文字，隐藏） }

IE8中设置了readonly="readonly";为啥还有光标？

在IE浏览器中，当input获得焦点时，点击有unselectable="on"属性的标签时，不会触发onblur事件。

网页中，屏蔽右键的方法：

JS中为标签添加/移除onclick函数(CSS样式):

$("#StartStream").removeClass("rbtn").addClass("rbtnh");$("#StartStream").attr("onclick","StartStream("+strid+","+strpid+")");

$("#StartStream").removeClass("rbtnh").addClass("rbtn");$("#StartStream").removeAttr("onclick");

JS中修改图片:

HTML:
    
     JS:$("#ddd").attr("src","${ctx}/imgs/b.jpg");

1,各浏览器下，margin与padding显示差异

==解决办法:CSS reset

2,block+float+水平margin,IE6里的间距比超过设置的间距(横向布局)

==解决办法:diaplay:inline

(不用担心内联元素无宽高，因为float会让inline元素haslayout,让inline元素表现的和inline-block元素一样有宽高和垂直内外边距)

[我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题]

3,inline+(display:block)+float+水平margin,IE6里的间距比超过设置的间距

说明:该情况与上面的差不多,只是此处的元素一开始是内联元素,加了display:block的CSS属性.因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe

==解决办法:display:inline;display:table;

4,IE6对margin:0 auto;不会正确的进行解析

解决办法：

在父元素中使用text-align:center,在元件中使用text-align:left

5,无法设置微高(一般小于10px)：

说明:当设置元素高度小于10px时，IE6和IE7不受控制，超出设置的高度

产生原因:IE不允许原件的高度小于字体的高度

解决办法1:设置字体大小:font-size:0;

解决办法2:给超出高度的标签设置overflow:hidden

解决办法3:设置行高line-height小于你设置的高度

6,子元件撑破父元件

原因:父元件设置了overflow:auto属性,子元件会从父元件中撑破出来

解决办法:父元件中设置position:relative;

7,IE无法解析min-height和min-width

解决办法1:

selector{

min-height:150px;

height:auto !important;

height:150px;

}

解决办法2：

selector{

min-height:150px;

height:150px;

}

heml>body selector{

height:auto;

}

8,使用ul li时,li与li之间会空行

解决办法1:设置li selector{height:**px;}

解决办法2:li selector{float:left;clear:left;}

解决办法3:li{display:inline}

===========================

表格的单击行后，让当前行高亮显示

$(obj).addClass('bgclick'); // 设置被点击元素为红色$(obj).siblings('tr').removeClass('bgclick'); // 去除所有同胞元素的红色样式

转载于:https://my.oschina.net/yongqingfan/blog/483310

你可能感兴趣的文章