热门搜索 :
教你做菜
您的当前位置:首页正文

向高手询问一个比较弱的css问题<a>为啥包不住<img>_html/css_WEB-ITnose

2023-11-27 来源:海亿美食网
CSS HTML

 
  • /* CSS Document */body {margin:0; padding: 2px;}.containter{ margin:0; padding:0; border:solid #3399FF 1px; height:225px; width:auto;}.faceul{border: 0;}.faceul li{ list-style-type:none; float:left;}.faceul li a{height:223px;}.faceul li a img{border:none;}.faceul li a:hover{border:dashed 1px #F00;}
    以上代码会出现下面效果: 想要的效果是当鼠标移到图片上时,图片的边框显示出来为红色虚线。 为啥实际效果包不住?

    回复讨论(解决方案)

    .faceul li a{height:223px; display:inline-block; }

    谢谢!果然实现效果了,能解释下这句代码的意思吗

    谢谢!果然实现效果了,能解释下这句代码的意思吗 http://www.w3school.com.cn/css/pr_class_display.asp

    小编还为您整理了以下内容,可能对您也有帮助:

    关于css的问题,大神求求你们。

    这个其实使用hover:before或者hover:after可以实现的!

    (1)首先a标签下有一个图片,就是你上面的<a href="/"><img src="001.png" height="500" width:="400"/></a>。

    (2)设置a的position

    a{

    position:relative;

    }

    (3)给a标签设置hover:before样式

      a:hover:before{

      coutent:"";

      display:inline-block;

      background:url(xxx.png);

      width:400px;//大小和img的一样大

      height:500px;

      postion:absolute;//由于a设置为relative,所以after以a我基准来定位

      z-index:10;//使“蒙版”在上层显示

      top:0;

      }

    //就这样就可以了,前提是保证那个蒙版是透明的

    下面是我写的一个小例子,你看看,上面的样式根据你自己的情况去调整吧

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    *{

    margin:0;

    padding:0;

    }

    a{

    background: orange;

    width: 100px;

    height: 100px;

    display: block;

    margin:0 auto;

    }

    a:hover:after{

    content: '';

    background:black;

    opacity: 0.5;

    display: inline-block;

    position: absolute;

    z-index: 10;

    width: 100px;

    height: 100px;

    top:0px;

    }

    div{

    width: 100%;

    height:100%;

    }

    </style>

    </head>

    <body>

    <a>

    <div>模拟img</div>

    </a>

    </body>

    </html>

    如何解决css对浏览器兼容性问题总结

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名.

    CSS技巧

    1.p的垂直居中问题 vertical-align:middle; 将行距增加到和整个p一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行

    2. margin加倍的问题 设置为float的p在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个p里面加上 display:inline; 例如: <#p id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}

    3.浮动ie产生的双倍距离 #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} 这里细说一下block与inline两个元素:block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline 元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;

    4 IE与宽度和高度的问题 IE 不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两 个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。 比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样: #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

    5.页面的最小宽度 min -width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把width当 做最小宽度来使。为了让这一命令在IE上也能用,可以把一个<p> 放到 <body> 标签下,然后为p指定一个类, 然后CSS这样设计: #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );} 第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通 过Javascript的判断来实现最小宽度。

    6.p浮动IE文本产生3象素的bug 左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距. #box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //这句是关键} <p id="box"> <p id="left"></p> <p id="right"></p> </p>

    7.IE捉迷藏的问题 当p应用复杂的时候每个栏中又有一些链接,p等这个时候容易发生捉迷藏的问题。 有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。 解决办法:对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

    8.float的p闭合;清除浮动;自适应高度;

    ① 例如:<#p id=”floatA” ><#p id=”floatB” ><#p id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移,而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;) 这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。在 <#p class=”floatB”> <#p class=”NOTfloatC”>之间加上 < #p class=”clear”>这个p一定要注意位置,而且必须与两个具有float属性的p同级,之间不能存在嵌套关系,否则会产生异常。 并且将clear这种样式定义为为如下即可: .clear{ clear:both;}

    ②作为外部 wrapper 的 p 不要定死高度,为了让高度能自动适应,要在wrapper里面加上overflow:hidden; 当包含float的 box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。 例如某一个wrapper如下定义: .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

    ③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float p后面做一个统一的背景,譬如: <p id=”page”> <p id=”left”></p> <p id=”center”></p> <p id=”right”></p> </p> 比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而 page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决 <p id=”page”> <p id=”bg” style=”float:left;width:100%”> <p id=”left”></p> <p id=”center”></p> <p id=”right”></p> </p> </p> 再嵌入一个float left而宽度是100%的p解决之

    ④万能float 闭合(非常重要!) 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的p加上 class="clearfix" 即可,屡试不爽. /* Clear Fix */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */ 或者这样设置:.hackbox{ display:table; //将对象作为块元素级的表格显示}

    11.高度不适应 高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin 或paddign 时。 例: #box { } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } <p id="box"> <p>p对象中的内容</p> </p> 解决方法:在P对象上下各加2个空的p对象CSS代码:.1{height:0px;overflow:hidden;}或者为p加上 border属性。

    12 .IE6下为什么图片下有空隙产生解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.

    13.如何对齐文本与文本输入框 加上 vertical-align:middle; <style type="text/css"> <!-- input { width:200px; height:30px; border:1px solid red; vertical-align:middle; } --> </style>

    14.web标准中定义id与class有什么区别吗 一.web标准中是不容许重复ID的,比如 p id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他. 二.属性的优先级问题 ID 的优先级要高于class,看上面的例子三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历 页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.

    15. LI中内容超过长度后以省略号显示的方法 此方法适用与IE与OP浏览器 <style type="text/css"> <!-- li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; } --> </style>

    16.为什么web标准中IE无法设置滚动条颜色了 解决办法是将body换成html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <style type="text/css">

    <!-- html {

    scrollbar-face-color:#f6f6f6;

    scrollbar-highlight-color:#fff;

    scrollbar-shadow-color:#eeeeee;

    scrollbar-3dlight-color:#eeeeee;

    scrollbar-arrow-color:#000;

    scrollbar-track-color:#fff;

    scrollbar-darkshadow-color:#fff; } -->

    </style>17.为什么无法定义1px左右高度的容器 IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px

    18.怎么样才能让层显示在FLASH之上呢 解决的办法是给FLASH设置透明 <param name="wmode" value="transparent" />

    19.怎样使一个层垂直居中于浏览器中这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二

    <style type="text/css">

    <!-- p {

    position:absolute;

    top:50%;

    lef:50%;

    margin:-100px 0 0 -100px;

    width:200px;

    height:200px;

    border:1px solid red;

    } -->

    </style>FF与IE

    1. p居中问题 p设置 margin-left, margin-right 为 auto 时已经居中,IE 不行,IE需要设定body居中,首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。

    2.链接(a标签)的边框与背景 a 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。

    3.超链接访问过后hover样式就不出现的问题被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解 决方法是改变CSS属性的排列顺序: L-V-H-A Code:

    <style type="text/css">

    <!-- a:link {} a:visited {} a:hover {} a:active {} -->

    </style>4. 游标手指cursor cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以

    5.UL的padding与margin ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题

    6. FORM标签 这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后 面就不会为这个头疼了.

    7. BOX模型解释不一致问题 在FF和IE 中的BOX模型解释不一致导致相差2px解决方法:p{margin:30px!important;margin:28px;} 注意这两个 margin的顺序一定不能写反, important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样: p {maring:30px;margin:28px}重复定义的话按照最后一个来执行,所以不可以只写margin:xx px!important; #box{ width:600px; //for ie6.0- width:500px; //for ff+ie6.0} #box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

    8.属性选择器(这个不能算是兼容,是隐藏css的一个bug) p[id]{}p[id]{} 这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择 器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

    9.最狠的手段 - !important; 如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下 .tabd1{ background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/ background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */} 值得注意的是,一定要将xxxx !important 这句放置在另一句之上,上面已经提过

    10.IE,FF的默认值问题 或许你一直在抱怨为什么要专门为IE和FF写不同的CSS,为什么IE这样让人头疼,然后一边写css,一边咒骂那个可恶的M$ IE.其实对于css的标准支持方面,IE并没有我们想象的那么可恶,关键在于IE和FF的默认值不一样而已,掌握了这个技巧,你会发现写出兼容FF和 IE的css并不是那么困难,或许对于简单的css,你完全可以不用”!important”这个东西了。 我们都知道,浏览器在显示网页的时候,都会根据网页的 css样式表来决定如何显示,但是我们在样式表中未必会将所有的元素都进行了具体的描述,当然也没有必要那么做,所以对于那些没有描述的属性,浏览器将采 用内置默认的方式来进行显示,譬如文字,如果你没有在css中指定颜色,那么浏览器将采用黑色或者系统颜色来显示,p或者其他元素的背景,如果在 css中没有被指定,浏览器则将其设置为白色或者透明,等等其他未定义的样式均如此。所以有很多东西出现FF和IE显示不一样的根本原因在于它们的默认显 示不一样,而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定,因此对于这点也就别去怪罪IE了。

    11.为什么FF下文本无法撑开容器的高度标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样 设置呢?办法就是去掉height设置min- height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义: { height:auto!important; height:200px; min-height:200px; }

    12.FireFox下如何使连续长字段自动换行 众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入 的方法来解决 <style type="text/css"> <!-- p { width:300px; word-wrap:break-word; border:1px solid red; } --> </style> <p id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <scrīpt type="text/javascrīpt"> /* <![CDATA[ */ function toBreakWord(el, intLen){ var ōbj=document.getElementById(el); var strContent=obj.innerHTML; var strTemp=""; while(strContent.length>intLen){ strTemp+=strContent.substr(0,intLen)+" "; strContent=strContent.substr(intLen,strContent.length); } strTemp+=" "+strContent; obj.innerHTML=strTemp; } if(document.getElementById && !document.all) toBreakWord("ff", 37); /* ]]> */ </scrīpt>

    13.为什么IE6下容器的宽度和FF解释不同呢 <?xml version="1.0" encoding="gb2312"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- p { cursor:pointer; width:200px; height:200px; border:10px solid red } --> </style> <p ōnclick="alert(this.offsetWidth)">让FireFox与IE兼容</p> 问题的差别在于容器的整体宽度有没有将边框(border)的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢?大家把容器顶部的

    我在做移动端时遇见的css问题

    关于css常见问题,大多是移动端的。

    简单的排版规则:条目与条目之间空两行,每条内容部分分段空一行。标点符号全部用中文字符。css的标点用英文。

    条目编号后面紧跟英文字母的,要空一格,比如 4. css,“4.”和“css”之间有一个空格。

    一、在做手机轮播图时,banner图的宽度是手机屏幕的宽度,轮播图加了左右切换按钮,按钮的position:absolute;定位的元素,定位的元素超出父容器时(超出了100%),会出现滚动条。

    二、在移动端有3种布局可选。

    1.定位布局

    说明:头部、尾部是fixed定位。中间内容部分绝对定位,overflow-y:auto;

    2. flex布局(朕极力推荐)

    说明:这里写的简洁,没有写很多兼容,移动端兼容性比较好,安卓5.1以上都可以用。用的是较新的flex声明。(这个布局是抄袭手淘团队的。)

    3.普通的流式布局

    说明:头部和尾部依然是fixed定位,但是#content内容部分则是用padding-top和padding-bottom来支撑页面,这种布局相当垃圾,会带来各种页面上下莫名其妙的留白问题。

    三、css属性

    1. word-wrap:break-word; word-break:break-all;让一行连续的数字或英文字母遇到边界自动换行。

    2. -webkit-user-select:none | normal | text;这个属性是禁止用户选择、复制文字,同时还会使input框、select框不能获取焦点,导致无法输入或选择。 所以在使用这个属性时,注意防止对input和select的污染。

    3. css3属性选择器。li[class*='act'],可以选中所有class中有‘act’的li元素。

    $('li').attr('class').indexOf('act'); 只是获取第一个li的class,然后判断是否有‘act’;

    通过for循环可以进一步操作,

    for(var i = 0; i < $("li[class*='act']").length; i++){

    $("li[class*='act']")[i] . . .

    }

    4.清除浮动,解决高度塌陷

    a.伪类(抄袭bootstrap的做法)

    .clearfix{}

    .clearfix:after{ display:table; content:' '; clear:both; }

    b.王妮的做法

    .box{ clear:both; overflow:hidden; }

    c.对于子元素写margin-top把父级拖下来的情况

    (百度说是W3C的标准,只要破坏了父级子级紧贴的结构就可以了)

    给父级写border-top,或者给父级写padding-top。采用b方法也可以,a方法无效。

    5. css高度单位和颜色单位

    height:calc(100vh - 200px); 目前来看,兼容性还不错。注意,减号两边是有空格的。

    background:rgba(255,255,255,0.5); rgb颜色值 和 颜色透明度。

    6.关于 padding-top:100%; padding-left:100%;

    可以利用这两个属性做绝对正方形。比如微信朋友圈的照片9宫格,qq空间的照片9宫格,sina微博的照片9宫格。屏幕宽度未知,一行排3个,每个宽度都是33.33333%,但是高度不能写百分比了。在每个宽度为33.3333%的元素里再写一个div,这个div的默认宽度就是父级的33.33333%,再用padding-top:100%;把高度撑开,padding-top:%;就是根据已有宽度计算,padding-top:100%;padding-top的px值就和宽度相同,这样,正方形就做出来了,在正方形里面position:absolute;一个div,width:100%; height:100%;然后在这个div里面布局就好。

    每个正方形的间距可以用qq空间的2px的透明边框来做,也可以像sina微博一样,用左右padding和margin-bottom来做。一张图和四张图的时候,sina是另外写两个class来做的。

    qq空间是js插件写进去的,最大宽度是290px,高度是根据最大宽度计算出来的。

    7. 0.5px的线

    a.发现qq空间的细线,兼容2倍屏和3倍屏

    @media only screen and (-webkit-min-device-pixel-ratio : 1.5),(min-resolution:120dpi),(-ms-high-contrast:active),(-ms-high-contrast:none) {

    .action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after {

    -webkit-transform:scaleY(.5);

    -moz-transform: scaleY(.5);

    -ms-transform: scaleY(.5);

    -o-transform: scaleY(.5);

    transform: scaleY(.5)

    }

    .action.flex .dropdown-menu .btn:after,.action.flex:before,.min-comments:nth-child(1):after {

    -webkit-transform-origin: 100% 0;

    -moz-transform-origin: 100% 0;

    -ms-transform-origin: 100% 0;

    -o-transform-origin: 100% 0;

    transform-origin: 100% 0

    }

    .action.flex:after,.action.flex>.btn:after,.feed .source:after {

    -webkit-transform-origin: 0 100%;

    -moz-transform-origin: 0 100%;

    -ms-transform-origin: 0 100%;

    -o-transform-origin: 0 100%;

    transform-origin: 0 100%

    }

    }

    @media only screen and (-webkit-device-pixel-ratio: 1.5) {

    .action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after {

    -webkit-transform:scaleY(.6666);

    -moz-transform: scaleY(.6666);

    -ms-transform: scaleY(.6666);

    -o-transform: scaleY(.6666);

    transform: scaleY(.6666)

    }

    }

    @media only screen and (-webkit-device-pixel-ratio: 3) {

    .action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after {

    -webkit-transform:scaleY(.33);

    -moz-transform: scaleY(.33);

    -ms-transform: scaleY(.33);

    -o-transform: scaleY(.33);

    transform: scaleY(.33)

    }

    }

    b. weui的作法是

    .weui-cells:after {

    content: " ";

    position: absolute;

    left: 0;

    bottom: 0;

    right: 0;

    height: 1px;

    border-bottom: 1px solid #e5e5e5;

    color: #e5e5e5;

    -webkit-transform-origin: 0 100%;

    transform-origin: 0 100%;

    -webkit-transform: scaleY(0.5);

    transform: scaleY(0.5);

    z-index: 2;

    }

    8.背景图片尺寸background-size,img标签object-fit,object-position。

    background-size:contain | cover | auto 90% | 50% auto;

    这是以背景图的方式展示图片的,如果用img元素的话,

    object-fit:fill | contain | cover | none | scale-down;(和background-size效果类似)

    object-position:center; 和background-position的取值一样。

    这两个属性一起用的话,就能让img元素src的图片效果像背景图片的效果一样,不会因为图片尺寸不成比例而走形。但是兼容性不太好,目前只适合在移动端用。

    9.阻止手机弹出默认菜单,长按img标签或者长按a标签会弹出系统默认菜单(ios上,安卓上没测)。

    -webkit-touch-callout:none;

    10.给文字写行高时,让文字垂直居中时,要把高度也一起写了,line-height:35px; height:35px;

    在用appcan做hybrid app时,发现在华为meta8上,用 ul li 做九宫格,li 浮动排在一行时,每个 li 有文字,高度用li的行高撑开的,没有文字的 li 和有文字的 li 的高度是不一样的。有的格子有文字有的没有文字,导致九个格子没有排在3行,有格子掉下去了,排成了4行。所以,在用行高让文字居中时,高度和行高要都写上。

    11. text-align:justify;

    p标签内大段文字时,除了最后一行,其余的文字都是左对齐,导致段落文字距离右边间距明显大于左边。

    可以利用这个属性不处理最后一行的特性,做这种布局:

    上面这个布局有一点bug,最后一行是留白,把父级撑高了,原因是父级认为所有子代,包括空文本节点都是占据空间的,哪怕空格,也占据空间。可以给父级 ul 写 font-size:0;就能把底部留白去除了,然后给子代再写font-size:14px;就可以了。 但是,text-align:justify;毕竟是处理空格(拉伸空格来使内部元素水平分散),所以在html中,li 要是连着写和分段写,表现结果是不一样的,所以这种奇妙的布局还是有些许不完美,甚至不能用。

    12.去除-webkit-的滚动条

    #content::-webkit-scrollbar{ display:none; }

    设置滚动条样式

    /*滚动条宽度*/

    #content::-webkit-scrollbar{ width:5px; }

    /*滚动条滑块*/

    #content::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.25); border-radius:3px; }

    /*滚动条的整个背景*/

    #content::-webkit-scrollbar-track-piece{ background:#eee; }

    TGuide

    /* scrollbar */

    ::-webkit-scrollbar{width:10px;height:10px}

    ::-webkit-scrollbar-button{display:none}

    ::-webkit-scrollbar-track{background-color:black}

    ::-webkit-scrollbar-track-piece{background:#FFF}

    ::-webkit-scrollbar-thumb{background-color:#8E8E8E;border-radius:5px}

    ::-webkit-scrollbar-thumb:hover{background-color:#3B3B3B}

    ::-webkit-scrollbar-corner{background-color:#535353}

    /*::-webkit-scrollbar-resizer{background-color:#FF6E00}*/

    前面不加选择器表示,所有出现滚动条的元素。

    13.设置placeholder的样式

    input::-webkit-input-placeholder{ color:#999; }

    input::-moz-input-placeholder{ color:#999; }

    input:-ms-input-placeholder{ color:#999; }

    注意 -ms- 前面是一个 “ :”。

    14.移动端点击某一行 :active 时添加背景色,比如 li:active{ background:#eee; } 时,要给 body标签上写ontouchstart,否则没有效果。

    另一方面,给body添加,可以阻止图片被默认拖拽。百度的logo就可以被拖拽。

    15.pageshow()和pagehide()方法。

    问题描述:A页面跳转到B页面,在B页面操作后,返回到A页面,A页面的ajax方法不能被再次触发。appcan里面从B页面返回A页面是直接关闭了B页面,微信里是从缓存里取。这两者都不能再次触发A页面的ajax。比如,修改姓名,修改性别。从A页面点击input跳转到B页面进行修改操作,修改完成之后返回A页面,发现信息没有刷新,此时需要主动触发。

    解决方法:可以监听pageshow方法,用addEventListener方法进行监听。pageshow()方法的触发条件是,只要页面被显示就触发,比如appcan里的B页面覆盖在A页面,把B页面关闭,A页面自然就展现出来了,那么A页面的pageshow方法就会触发;微信里,点击返回,虽然是从缓存里取页面,但也会触发pageshow方法。pagehide()顾名思义。

    16.关于position。

    华为meta7,安卓版本4.4.2,position:relative; 的元素比position:absolute; 的元素层级要高。百度新闻的导航效果,也是利用了这个。很奇怪。

    这种结构,i.line是absolute,每个div都是relative,安卓4.4.2上 i.line 会被父级的兄弟div遮挡住。

    解决办法是,把 i.line 拿出来,和div同级。

    17. background:url() no-repeat center, url() no-repeat center; 可以一次性放两个图片,中间用逗号隔开。

    18.关于移动端软键盘弹起,盖住页面的问题。

    核心解决办法是利用 document.activeElement.scrollIntoView(false); 参数false,表示activeElement的元素与页面下边对齐,true表示activeElement的元素与页面上边对齐。这个方法兼容性很好。

    另一个方法与之类似 document.activeElement.scrollIntoViewIfNeeded(); 这个方法效果不是很好,没有上面那个好用。

    19.常见于小说、报纸排版的column布局。

    常用的5个属性有4个是知晓效果的:

    column-width:; 每列的宽度。

    column-gap:; 列与列之间的间距。

    column-fill:; 不知有何软用。

    column-rule:; 列与列直接的分割线,与border属性效果一样。

    column-count:; 总共分多少列。(这个属性受column-width,当同时写上column-width和column-count时,以column-width优先,比如总宽度800px,height:200px; column-width:400px; column-count:4; 显然,800px最多只能分2列,所以优先以column-width进行计算。)

    小兼容:ios上,横向滚动 overflow-x:auto; 的容器不适合直接当成分栏布局的容器,应该在 overflow-x 的元素内嵌套一个div当做分栏布局的容器。否则会出现,分栏线,column-rule不跟随容器滚动的奇异现象。另外,column-gap不适合赋值,应当将column-gap写成0,列与列之间的间距可以用分栏布局的子元素的左右padding来做。

    大段文字

    .box{ width:300px; height:14em; overflow-x:auto; } /*滚动的容器*/

    .col{ height:11.9em; text-align:justify; column-count:2; column-gap:0; } /*分栏的容器*/

    .col > p{ padding:0 .5em; line-height:1.2; } /*文字内容的容器,加左右padding以增加列与列之间的间距。*/

    四、貌似很多webapp都会写两个meta标签

    不确定是否支持16进制的颜色值。(好像测试过,16进制颜色没有效果。在appcan里也没有效果。)

    五、 一般不能上传相同图片

    可以用 $('input[type="file"]').wrap('').closest('form').get(0).reset(); 重置后就可以了。

    六、在安卓上touchmove出现了神奇的bug,百度上说,安卓上touchmove的一瞬间就会触发touchcancel,touch事件就全部被取消了。IOS上是没有这个问题的。

    解决方法是:在touchmove里写e.preventDefault();即可。但是这样的话,手指滑动页面就不能scroll了。页面将无法滚动了。

    七、flex布局

    1. 2012年以后的版本

    给父级添加 display:-webkit-flex; display:flex;

    flex盒子内子元素的排列方向称作主轴,与主轴垂直的称作交叉轴。

    flex盒子内的子元素可以被作项目。

    注意:设为flex后,其子元素的float、clear、vertical-align属性就会失效。

    a.作用于父级的6个属性:flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content。

    //子元素的排列方向

    flex-direction:row(默认值,从左到右) | row-reverse(从右到左) | column(从上到下) | column-reverse(从下到上);

    //子元素是否换行

    flex-wrap:nowrap(默认值,不换行) | wrap(换行) | wrap-reverse(换行,但第一行在下方);

    //子元素排列方向和子元素是否换行的简写

    flex-flow:row nowrap;(默认值,从左到右,不换行。)

    //项目(子元素)在主轴上的对齐方式

    justify-content:flex-start(默认值,以起点为始) | flex-end(以终点为始) | center(居中) | space-between(首尾两个元素紧贴边界,其余元素之间间隔相等) | space-around(每个项目的两侧间隔相等,相当于给每个项目加了margin,并且左右margin相等。所以首尾元素与边界都是有间距的。);

    //项目(子元素)在交叉轴上的对齐方式

    align-items:flex-start(以起点为始) | flex-end(以终点为始) | center(居中) | baseline(与项目的第一行文字的基线对齐) | stretch(默认值,在交叉轴方向撑满父级);

    //多根轴线的对齐方式,如果只有一根轴线,该属性不起作用。

    align-content:flex-start(与交叉轴的起点对齐) | flex-end(与交叉轴的终点对齐) | center(与交叉轴的中点对齐) | space-between(与交叉轴两端对齐,轴线之间的间隔平均分布) | space-around(每根轴线两侧的间隔都相等。轴线之间的间隔比轴线与边框的间隔大一倍,第一行和最后一行不会紧贴边框) | stretch(默认值,铺满整个交叉轴);

    ( align-content:stretch; 第一根轴线与边框对齐,其他轴线均分父级间隙。 )

    b.作用于项目(子元素)的6个属性:order,flex-grow,flex-shrink,flex-basis,flex,align-self。

    //子元素的排列顺序

    order:0(默认值) | 1 | 2 | 3 . . .

    //项目(子元素)的放大比例

    flex-grow:0(默认值,默认不放大,尽管有剩余空间) | 1 | 2 | 3 . . .

    //项目的缩小比例

    flex-shrink:1(默认值,当空间不足时,该项目将缩小) | 0(不论如何,都不缩小);

    //项目占据的主轴空间

    flex-basis:auto(默认值,项目本来的大小) | 固定值(200px,50%,100% . . .);

    //flex-grow,flex-shrink,flex-basis的简写 flex :0 1 auto;

    flex:0 1 auto(默认值,有多余空间也不放大,但空间不足会缩小,默认占据空间就是自身大小);

    flex:auto; => flex:1 1 auto; 根据空间大小,可放大可缩小。(有兼容性问题,chrome可以正常解析 flex:auto; -- flex:1 1 auto; 但 IE 就搞笑了,IE10解析出来的flex:auto -- flex:1 0 auto;只放大,不缩小。IE11解析出来的flex:auto;和chrome一样,可放大可缩小。所以在用这个属性的时候,要写完整值,不要简写。)

    flex:none; -- flex:0 0 auto;不放大,也不缩小。

    //单个项目与其他项目不一样的对齐方式,会覆盖父级的align-items;

    align-self:auto(默认值, 继承父级的align-items的值) | flex-start | flex-end | center | baseline | stretch; 除了auto,其他的与父级align-items属性一致。

    注意要活用align-self:stretch;和align-items:stretch;

    2. 2009年的版本

    目前新版本被支持的很好,所以旧版的直接写带前缀的。

    display:-webkit-box; display:-ms-flexbox;

    子元素如果有display:inline的,要把子元素写成display:block; 2012年的版本不需要。

    a.父级的5个属性。-webkit-box-pack,-webkit-box-align,-webkit-box-direction,-webkit-box-orient,-webkit-box-lines。

    //项目在主轴上的对齐方式

    -webkit-box-pack:start(默认值,从起点开始) | end | center | justify;

    //项目在交叉轴上的对齐方式

    -webkit-box-align:stretch(默认值,交叉轴方向撑满父级) | start | end | center | baseline;

    //项目的排列顺序

    -webkit-box-direction:normal(默认值,以起点为始) | reverse(以终点为始);

    //主轴方向

    -webkit-box-orient:horizontal(默认值,水平方向) | vertical(垂直方向) | inline-axis(行内方式,映射为horizontal) | block-axis(块方式排列,映射为vertical);

    //项目(子元素是否换行)

    box-lines:single(默认值,不允许) | multiple(允许);

    经测试,没有浏览器支持,这个属性不能用。

    b.子元素的3个属性。box-flex,box-flex-group,box-ordinal-group。

    //是否缩放

    -webkit-box-flex:0(默认值,不放大也不缩小) | 1 | 2 | 3 . . .;

    //子元素排列次序

    -webkit-box-ordinal-group:1 | 2 | 3 . . . 从小到大排列。

    3. 对 1、2 的小结。

    2012年版本比2009年的版本主要多了两个属性,1个是子元素是否换行,flex-wrap,2009年的box-lines不起作用。还有一个是子元素在主轴的对齐方式,2012年的justify-content:space-around; 2009年的没有这个效果,但是可以通过加左右padding值的方式做到。

    如果要兼容2009年版本的盒子布局又想换行的,只能改用float布局。

    八、html结构嵌套问题

    p标签内不要嵌套块元素,其他的像h、p、dl . . .的块元素都会发生解析错误。可以嵌套行间元素。

    类似的,还有a标签里不能再出现a标签,嵌套多少层都不行。

    html标签嵌套要按照块元素包含行间元素的规则来写。

    九、标签

    让浏览器用最新内核渲染。

    十、form标签一点特性

    在移动端,input框获取焦点时,浏览器会弹出软键盘,想让软键盘的enter键变成搜索两个字,需要让这个input按照这种结构写:

    说明:onsubmit='return false';阻止表单默认提交,便于自己操作。

    input 的 type 必须是 search。

    input 的 加了style='position:relative;',防止ios上点击搜索按钮会闪屏(白屏)。

    十一、浏览器兼容

    1.关于table表格的宽度设置问题。

    Firefox和chrome的解析方式是不一样的,chrome会把你写的table宽度全部转化成px。Firefox则不会,所以在td写行间样式宽度时,不能百分比和px混用,要统一,要么每个td都写百分比的宽,要么都写px的宽;不要这几个td写百分比,那几个td写px。

    2.某些安卓不识别height:calc(); 可以用flex布局代替。

    十二、KTV字幕效果

    实现方式1:

    把文字写两遍,两个行间元素span,包裹相同的文字。

    首页

    首页

    或者

    首页

    首页

    实现原理是:让内部两个span宽度相等,其中一个设置width:0%;overflow:hidden; 然后用js动态控制width从0% -- 100%。

    实现方式2:(张鑫旭说只适用于chrome,但是我测了下,好像firefox也是可以的。)

    实现原理:background-image是覆盖在background-color上的,chrome有个私有属性 -webkit-background-clip:text; 意为背景裁切,以文字为裁切起止。效果就是背景图片只会展示文字的书写路径,除了文字的其他部分空间不展示背景图。再结合-webkit-text-fill-color:transparent; 将文字渲染的颜色写为透明,这样,文字路径就透出了背景图。再改变背景图片的水平位置,就能露出文字和背景图片下的背景颜色,就做到KTV字母效果了。

    核心的css属性:

    background-image:url(); /*纯色的背景图,用来渲染文字颜色,因为文字是透明的。*/

    background-repeat:no-repeat;

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-position:0 0;

    ↑改变他就可以了。

    关于实现方式2的图示:

    css问题(在线等)

    加的地方错了,一个如下的链接:

    <div><a href="">链接</a></div>

    假设你的样式表是这样的:.mylink{color:rgb(255,200,255);}

    可以有下面几种方式加,你自己试试不同的加法是什么效果就明白了:

    <div><a href="" class="mylink">链接</a></div>

    <div class="mylink"><a href="">链接</a></div>

    <div><a href=""><span class="mylink">链接</span></a></div>

    海亿美食网还为您提供以下相关内容希望对您有帮助:

    如何解决css对浏览器兼容性问题总结

    二.属性的优先级问题 ID 的优先级要高于class,看上面的例子三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历 页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如...

    我在做移动端时遇见的css问题

    这两个属性一起用的话,就能让img元素src的图片效果像背景图片的效果一样,不会因为图片尺寸不成比例而走形。但是兼容性不太好,目前只适合在移动端用。 9.阻止手机弹出默认菜单,长按img标签或者长按a标签会弹出系统默认菜单(ios上,安卓...

    新手关于html css的疑问

    你的 div用的 absolute 绝对定位,这个的位置只能用top,left,right,bottom 来控制位置,form没用 absolute 会从最上面没有absolute 的元素开始算坐标,去掉absolute就行了 p是段落标签,div是块级元素,都会自动换行,不同的...

    刚刚学习css,编辑导航条中出现了一点问题。不知道样式哪里出了差错...

    font-size:14px;}.clearfix:after{ content:"."; display:block; visibility:hidden; height:0; clear:both; }&lt;/style&gt;&lt;body&gt;&lt;ul class="nav clearfix"&gt; &lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/l...

    css图片为啥右浮动没有反应,a标签无法挪动

    要想移动a标签,对标签要定位,也就是有position属性,不然任何元素都不能移动的,我看见你的图片是左浮动left并不是右浮动,这是在代码中看出来的,没有用电脑测试呢。

    请教初级CSS代码问题

    目前浏览器还不能很好的支持DIV的垂直对齐属性,所以只能硬设了..以下代码都可以完成你的要求:1、 #header {width:100px;height:92px;padding-top:8px;} 2、 #header img{margin-top:8px} 3、 #header img{...

    CSS使用的问题

    4. CSS用于文档打印 许多网站上都有一个针对打印的版本,但实际上这并不需要,因为可以用CSS来设定打印风格。 也就是说,可以为页面指定两个CSS文件,一个用于屏幕显示,一个用于打印: &lt;link type="text/css" rel="stylesheet" href=...

    CSS布局问题,嵌入不了?

    你这个里面少了一个div,而且包含表格和container的div没有定义宽度,浮动也没有定义。如果你是要插入table,你可以参考下面,把div id=table转换成table &lt;html &gt; &lt;head&gt; &lt;style type="text/css"&gt; .container, .container...

    菜鸟请教CSS的问题,谢谢。

    固定底部的话 那要设置 bottom: 0; position: fixed; width: 宽度; z-index: 100;margin:0 auto;图片相对于显示器居中的话 那就设置一个图片宽度 和margin:0 auto;固定顶部 也类似 你可以自己研究试试...

    怎么解决浏览器的css样式兼容问题

    1、在同一个CSS样式表中,使用 !important 来定义不同的值以适应Firefox和IE。例如:padding: 20px !important; /For Firefox/ padding: 10px; /For IE/ (注意这里IE6是无法识别,important 这个标记的,但它会识别...

    Top