前端CSS问题

字数统计: 1.9k字   |   阅读时长≈ 9分

iPhone Safari浏览器字体放大 ——解决方法

1
2
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;

表格中内容超出指定宽度隐藏，鼠标上移，在指定宽度内换行显示。（不需要js，css的hover解决）

需要在td里面加上span等标签来限制宽度和溢出隐藏
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
table{
    margin: 0 auto;
    width: 30%;
    border: 1px solid #666;
    text-align: center;
    border-collapse:collapse;
}
th{
    height:40px;
    line-height: 40px;
}
td{
    height: 40px;
    line-height: 40px;
}
tr{
    border-bottom: 1px solid #666;
}

td span {
    display: inline-block;
    width:160px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: middle;
}
td span:hover {
    white-space: inherit;
    text-overflow: inherit;
    overflow: visible;
}


<table border="1">
    <th>姓名</th>
    <th>年龄</th>
    <th>简介</th>
    <tr>
        <td>羊羊羊</td>
        <td>25</td>
        <td >
            <span>
                79942 79942 79942 79942 79942 79942 79942 79942 79942 79942 79942 79942
            </span>
        </td>
    </tr>
</table>
溢出隐藏：
鼠标上移，换行显示全部内容：

css3超出宽度自动换行以及超出宽度显示…

css3超出宽度自动换行，并且首行缩进2字符

1
2
3
4
5
div{
    text-indent: 2em;
    word-wrap: break-word;
    word-break: break-all;
}

单行超出宽度显示…

1
2
3
4
5
div {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

多行超出宽度显示…以及要求显示几行或者说根据文字多少显示几行

1
2
3
4
5
6
7
div {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;  //控制显示几行
    -webkit-box-orient: vertical;   //webbox方向
}

CSS3强制英文、中文换行与不换行 强制英文换行

1
2
3
4
5
1. word-break:break-all;只对英文起作用，以字母作为换行依据
2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据
3. white-space:pre-wrap; 只对中文起作用，强制换行
4. white-space:nowrap; 强制不换行，都起作用 
5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）

input输入框禁止显示历史记录

在输入input时会提示原来输入过的内容，还会出现下拉的历史记录，禁止这种情况只需在input中加入：
autocomplete=”off”

1
<input type="text"  autocomplete="off" />

参考博客

浏览器记住密码的情况下，解决密码输入框自动填充密码框（input type=”password” 的问题）

1
2
3
用户名：<input type='text' autocomplete='off'>
密码：<input type='password' autocomplete="new-password" style="background-color: #fff!important;" readonly onfocus="this.removeAttribute('readonly');" onblur="this.setAttribute('readonly',true);">

解决html页面英文和数字不自动换行，但中文就可以自动换行

解决方法：添加css属性word-break: break-all;

溢出的文字隐藏

1
2
3
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

溢出文字省略号显示

1
2
3
4
5
6
7
.content{
    /* display:block; */
    width:200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

注：如果是表格元素，需要加上display:block;

处理IE浏览器：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
(function($) { 
    $.fn.ellipsis = function(enableUpdating){ 
        var s = document.documentElement.style; 
        if (!('textOverflow' in s || 'OTextOverflow' in s)) { 
            return this.each(function(){ 
                var el = $(this); 
                if(el.css("overflow") == "hidden"){ 
                    var originalText = el.html(); 
                    var w = el.width(); 

                  var t = $(this.cloneNode(true)).hide().css({ 
                      'position': 'absolute', 
                      'width': 'auto', 
                      'overflow': 'visible', 
                      'max-width': 'inherit' 
                  }); 
                  el.after(t); 

                  var text = originalText; 
                  while(text.length > 0 && t.width() > el.width()){ 
                         text = text.substr(0, text.length - 1); 
                         t.html(text + "..."); 
                     } 
                     el.html(t.html()); 

                     t.remove(); 

                     if(enableUpdating == true){ 
                         var oldW = el.width(); 
                         setInterval(function(){ 
                             if(el.width() != oldW){ 
                                 oldW = el.width(); 
                                 el.html(originalText); 
                                 el.ellipsis(); 
                             } 
                         }, 200); 
                     } 
                 } 
             }); 
         } else return this; 
     }; 
 })(jQuery);

要调整placeholder属性的样式，如果在谷歌浏览器下审核不了placeholder

解决方法：

  1. F12，打开控制台
  2. 在控制台右上角，选择三个点（更多选项图标），选择“Settings”
  3. 将Show user agent shadow DOM勾选上

文本域(textarea)的提示文字(placeholder)换行显示

1
2
3
加上&#13;&#10;

placeholder="请输入微信APP支付参数，便于技术查看，涉及字段如下：&#13;&#10;微信支付商户号：&#13;&#10;商户Key：&#13;&#10;微信AppID：&#13;&#10;AppSecret:"

修改placeholder样式

1
2
3
4
5
6
7
8
9
10
11
12
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
	color: #ccc;
}
::-moz-placeholder { /* Firefox 19+ */  
	color: #ccc;
}
:-ms-input-placeholder { /* IE 10+ */ 
 color: #ccc;
}
:-moz-placeholder { /* Firefox 18- */ 
 color: #ccc;
}

textarea元素的placeholder属性不显示

textarea的placeholder属性值不显示的原因可能是之间存在空格或者换行

修改input type=”file”按钮样式

html结构：

1
2
3
4
<div class="iconBtn">
	<span>上传子活动文件</span>
	<input class="inputFile" type="file" name="semfile">
</div>

css样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.iconBtn {
    position: relative;
    border: 1px solid #c9c9c9;
    border-radius: 3px;
    font-size: 12px;
    padding: 6px 10px 7px;
    color: #666;
    display: inline-block;
    cursor: pointer;
    background-color: #fbfbfb;
}
.inputFile {
    position: absolute;
    opacity: 0;
    filter: alpha(opacity=0);
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    cursor: pointer;
}

头部和底部固定定位，中间内容区滚动展示

1
2
3
4
5
6
<header class="head">顶部固定区域</header>

<article  class="main" id="wrapper">  
</article>

<footer class="foot">底部固定区域</footer>
1
2
3
4
5
6
7
.head,.foot{position:fixed;left:0;height:38px;line-height:38px;width:100%;background-color:#999;}

.head{top:0;}

.foot{bottom:0;}

.main{position:fixed;top:38px;bottom:38px;width:100%;overflow:scroll;background-color:#f2f2f2;}

cSS3 :nth-last-child()选择器

规定属于其父元素的第二个子元素的每个p元素，从最后一个子元素开始计数∶

1
2
3
p:nth-last-child(2) {
	background: #fff;
}

chrome提示框（弹窗）字体模糊

白己写的一个很简单的提示框，firefox , Safari , ie都清晰，但是chrome就惑觉很模糊

transform，z-index有可能导致这个问题

取消a标签在移动端点击时的蓝色:

1
2
3
4
-webkit-tap-highlight-color: rgba(255,255,255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;

使用图片作为a标签的点击按钮时，当触发touchstart的时候，往往会有一个灰色的背景︰

1
2
3
4
5
6
7
a,a:hover,a:active,a:visited,a:link,a:focus{
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
	outline:none;
	background: none;
	text-decoration: none;
}

改变选中内容的背景颜色

1
2
3
4
5
6
7
8
9
10
11
12
::selection {
	background: #FFF;
	color: #333;
}
::-moz-selection {
	background: #FFF;
	color: #333;
)
::-webkit-selection {
	background:#FFF;
	color: #333;
}

input 消除自动记忆功能 关闭浏览器自动填充输入框

input 的autocomplete属性默认是on：其含义代表是否让浏览器自动记录之前输入的值

1
autocomplete="off"

去除ios input框点击时的灰色背景︰

1
-webkit-tap-highlight-color:rgba(0,0,0,0);

解决IE阴影兼容性

ie-css3.htc CSS3PIe

IE样式的兼容写法

1
2
3
4
5
.example{
    color:#fff;//FF,OP,IE8
    *color:#ff0;//IE7
    _color:#f00;//IE6
}

参考教程

但如果想要对IE8单独定义样式，可以这样：
html*~body .example{这里是针对IE8识别的样式}

针对IE9的CSS只需在相应CSS代码加入只有IE9识别的 \9\0。具体代码如下：

1
.div{ background-color:#0f0\9\0;/* ie9 */ }

其他浏览器写法：

1
2
3
4
5
6
7
background-color:#f00;/*all*/
background-color:#0ff\0;/* ie 8/9 */
background-color:#0f0\9\0;/* ie9 */
*background-color:#00f;/*ie7*/
_background-color:#ff0;/*ie6*/
background-color//:#090;/*非IE*/
background-color:#900\9;/*所有ie*/

怎么规定CSS的属性仅在IE下生效？在非IE浏览器下不生效

1
2
3
4
5
<!--[if IE]>
<style>
.test{color:red;}
</style>
<![endif]-->

css中判断IE版本的语句

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

主要涉及技术