zoukankan      html  css  js  c++  java
  • 一些我遇到前端方面的问题和解决方法

    1. 滚动

    移动端滚动只能用手指进行滑动,在ios5之前,overflow:scroll不被支持,但是在ios5之后,该属性已经被支持,如下

    	{
    	   overflow:scroll;
    	   -webkit-overflow-scrolling:touch;/*要加上这个*/
    	}
    

    2. 三列布局,两边自适应中间定宽

    怎么说呢,我在实习的时候遇到一个问题,一个三列布局,两边自适应中间定宽。
    原先使用CSS3的弹性布局:
    在父元素上display: flex;,在两边需要自适应的元素中flex: 1;,中间的元素定宽。
    但是在测试的时候发现这样的方式在 android一个低版本的(记得是vivo Y33) uc的浏览器(具体是那个版本的忘记了)上,出现了样式混乱(不用说用display:box,已经使用过了,还是无效。关于box和flex的区别,这里推荐一个知乎上的问题回答 https://www.zhihu.com/question/22991944

    最后采用了替代方法,举个栗子:

    	<!DOCTYPE html>
    	<html lang="en">
    
    	<head>
    		<meta charset="UTF-8">
    		<title>Document</title>
    		<style>
    		.parent {
    			 100%;
    			height: 300px;
    			position: relative;
    			background: red;
    			overflow: hidden;
    		}
    
    		.left {
    			float: left;
    			 50%;
    			height: 100%;
    			-webkit-transform: translateX(-16px);
    			transform: translateX(-16px);
    			background: pink;
    		}
    
    		.right {
    			float: right;
    			 50%;
    			height: 100%;
    			-webkit-transform: translateX(16px);
    			transform: translateX(16px);
    			background: green;
    		}
    
    		.center {
    			position: absolute;
    			 32px;
    			height: 100%;
    			left: 50%;
    			-webkit-transform:translateX(-50%);;
    			transform: translateX(-50%);
    			background: blue;
    		}
    		</style>
    	</head>
    
    	<body>
    		<div class="parent">
    			<div class="left"></div>
    			<div class="center"></div>
    			<div class="right"></div>
    		</div>
    	</body>
    
    	</html>
    
    

    3. 对于不支持HTML5标签的旧浏览器,无法对这些元素设置样式怎么办?

    https://modernizr.com/
    这个插件可以帮忙,ps:要在最前面引入哦

    4. 表单的自动填充问题

    在写表单页面的时候,比如登录必须包含:用户名和密码。
    简单的样栗子:

          <form action="http://localhost/dome/login.php" method="post">
    	   用户名:<input type="text" name="name"/>
    	   密  码:<input type="password" name="password" />
    	   <button type="submit">登录</button>
    	   </form>
    


    这就一个完全没有样式的一个登录,不要太介意
    第一次,我们输入正确的用户名和密码,然后登录成功了。
    如果浏览器有自动记住密码的话,下一次你打开的时候就会是

    伐开心...有个黄色的背景色
    但是可以在CSS中添加下列代码就可以去掉

    	 input:-webkit-autofill {
            background-color: white;
            background-image: none;
            color: #000;
            -webkit-box-shadow: 0 0 0px 1000px white inset;
          } 
    

    我们有些时候不想它自动填充表单,怎么办呢?
    第一种方法,autocomplete="off",新的input属性。
    第二种方法,如果不支持这个新属性呢?
    表单填充是根据type="password"来填充的,如果表单中没有type="password"的input标签,不就好了.可以将密码框的type=“text",监听focus事件,动态改变它的type为"password"。

    	   <form action="http://localhost/parabola-fe/demo/login.php" method="post">
    	   用户名:<input type="text" name="name"/>
    	   密  码:<input type="text" name="password" id="pw"/>
    	   <button type="submit">登录</button>
    	   </form>
    	   <script>
    		 $("#pw").on("focus",function(){
    		   try{
    			$(this).attr("type","password");
    			}catch(e){
    			//IE中type不可写
    			$(this).after("<input type='password' name='password' />")	
         	      $(this).remove();
    			}
    		 })
    
    	   </script>
    
      这样就可以啦~
    

    后续再补充~~

  • 相关阅读:
    Vue过滤器使用
    vue基础
    lesson
    lesson
    lesson
    lesson
    rm 命令详解
    alias 命令详解
    cd 命令详解
    cut 命令详解
  • 原文地址:https://www.cnblogs.com/bluey/p/6255698.html
Copyright © 2011-2022 走看看