精华内容
下载资源
问答
  • 移动端html5 输入框padding-left会导致... padding-left: 10px; } 目前而言,好的解决之道是width和padding均采用百分比值,例如下面这样: firefox低版本可能存在问题 input { width: 92%; padding-le

    移动端html5 输入框padding-left会导致放大

    解决办法:

    input { width: calc(100% - 10px); padding-left: 10px; } 

    目前而言,好的解决之道是widthpadding均采用百分比值,例如下面这样:

    firefox低版本可能存在问题
     
     
    input { width: 92%; padding-left: 4%; padding-right: 4%; }
     
     
    IE低版本可能会存在问题
     
     
    input { width: 100%; text-indent: 4%; }


    一、问题描述

    我是流体布局控,经常会遇到文本框以及文本域宽度100%自适应显示的情况。

    如下效果图:
    文本域宽度100%显示 张鑫旭-鑫空间-鑫生活

    在窄屏下,上面的文本框宽度也要跟着外部宽度变小。

    难点
    对于文本框或者文本域,光标最好距离左侧边缘有一定的间距。因此,我们基本上都有类似下面的设置:

    input { padding-left: 10px; }

    但是,如果只考虑文本框本身(父标签无其他特殊处理),这一套在流体环境下是行不通的,因为固定的padding数组无法让文本框永远100%自适应外部的宽度,至少非现代浏览器下是如此!//zxx: CSS3计算(calc())就是为了解决这类问题才诞生的!

    input { width: calc(100% - 10px); padding-left: 10px; } 

    目前而言,好的解决之道是widthpadding均采用百分比值,例如下面这样:

    input { width: 92%; padding-left: 4%; padding-right: 4%; }

    问题
    上面这种写法,IE6+, Opera, Chrome, Safari浏览器都是显示很OK的;唯独FireFox火狐浏览器,其虽然宽度渲染正常,但是,光标的位置确是顶头的(与数值padding的显示完全不同)。

    如下截图:
    FireFox下面文本框百分比padding显示的问题截图

    这个问题再FireFox浏览器下存在已经有3年之久了,到现在还没有修复。您可以狠狠地点击这里:FireFox下文本框百分比padding位置bug demo

    如何修复这个问题呢?

    //zxx: 可能有人会提议div模拟文本框(即div设置padding值), 文本框本身no border, no padding, 且width:100. 这种操蛋的方法我是一点都不喜欢的(纯属个人喜好,没有攻击的意思),一是啰嗦;二来文本框本身可能就有box-shadow, outline以及内联的交互验证UI(如验证非法红色外发光),难道你想把这些都抹杀掉??

    更新2012-11-30

    注意:FireFox 17+已经修复了该问题!

    二、text-indent修复法

    firefox浏览器下的问题其实只是文字的位置问题而已,其本身的宽度渲染都是准确的,因此,我们可以把解决问题的关键点放在解决文字不缩进的问题上——我们自然而然就会想到文字缩进属性text-indent.

    于是,在FireFox浏览器下,我们只要设置:

    input { text-indent: 4%; }

    就可以了!

    现在的问题是,如何只让FireFox浏览器设置这个属性呢??FireFox浏览器有专属的hack吗?

    我们打开FireBug, 点击下图所示的地方:
    FireBug打开浏览器默认的样式设置 张鑫旭-鑫空间-鑫生活

    于是,对于刚才的文本框,我们会看到FireFox浏览器默认对其的设置,其中有个这个:
    文本框默认的一些属性设置 张鑫旭-鑫空间-鑫生活

    这正是我们需要的,因此,添加类似下面的补丁:

    input:-moz-read-write{text-indent:4%;}

    即可完美修复FireFox浏览器下光标以及文字顶头显示的bug.

    修复之后的效果如下截图:
    FireFox浏览器下text-indent修复后截图 张鑫旭-鑫空间-鑫生活

    1024宽度下的截图:
    1024宽度下FireFox浏览器下修复截图

    您可以狠狠地点击这里:text-indent修复FireFox下文本框百分比padding问题demo

    可能的疑问
    说到这里,可能有比较灵光的同行会疑问,既然text-indent可以让文字位置后移,那为何要使用padding呢,直接:

    input { width: 100%; text-indent: 4%; }

    不就可以了吗?

    这确实是个不错的idea, 只可惜在IE6/IE7浏览器下,text-indent会偏移文本框的位置(连文本框自身一起缩进了!)。如下截图示意:
    IE6/IE7下文本框一起缩进了! 张鑫旭-鑫空间-鑫生活

    如下测试代码:

    .box{padding:40px 0; background-color:#B70D0D;}
    .box input { width: 200px; text-indent: 20px; }
    <p class="box"><input value="我是文字" /></p>

    您可以狠狠地点击这里:IE6/IE7文本框text-indent bug示意

    IE8+以及其他浏览器下都是OK的,缩进的只是文本框的文字,文本框不动,如下示意:

    局限
    text-indent撑开文字边距是有局限性的,显而易见,其只能让第一行文字有边距。于是,当面对多行文本域(textarea)的时候,text-indent就捉襟见肘,无能为力了!

    因此,对于文本域,我们需要寻求其他完善方法。

    三、box-sizing的修复策略

    FireFox下文本框或文本域对百分比padding值的显示有问题,但是对具体px的padding值显示却正常。因此,我们可以设置padding-left/padding-right为类似10px这样的具体数值,而把问题解决的重心放在如何宽度100%显示上。

    在CSS3属性中,有个叫做box-sizing的好东西,IE8+以及现代浏览器都支持,如果我们设置该属性值为border-box,则padding值不会撑大元素的设定宽度,如width:100px; padding:10px;最后元素占据的宽度还是100像素而不是120像素。

    于是,这里,我们可以如下设置CSS:

    input:-moz-read-write{width:100%; height:40px; padding:10px; -moz-box-sizing:border-box;}

    FireFox即问题修复,如下截图:
    box-sizing修复后的FireFox浏览器截图 张鑫旭-鑫空间-鑫生活

    您可以狠狠地点击这里:box-sizing修复FireFox文本框百分比宽度问题demo

    四、CSS3 cacl()计算修复

    上面的box-sizing方法影响到了原本OK的height设置,而使用CSS3 cacl()计算只针对目标属性width进行处理,如下修复代码:

    input:-moz-read-write{width:-moz-calc(100% - 20px); padding:10px;}

    注意,减号(-)前后需要有空格,否则无法识别。

    于是,有大致如下的修复效果图(FireFox浏览器截图):
    CSS3 cacl()计算修复后的FireFox浏览器截图 张鑫旭-鑫空间-鑫生活

    您可以狠狠地点击这里:box-sizing修复FireFox文本框百分比宽度问题demo

    五、文本框文本域含边框时的处理

    到目前为止所示的情况都是不含边框的,基本上,全世界90%+的文本框或者是文本域都是有border的,或自身的或CSSer设置的,要知道,border是不支持百分比宽度的,只能是固定数值大小的单位。现在问题来了:含有border的文本域文本框如何实现宽度100%的自适应呢??

    使用padding正值+margin负值补间技术
    //zxx: 这里的内容有些偏题,不过多展开。

    demo抢先,您可以狠狠地点击这里:文本域(含边框)的宽度100%显示demo

    固定数值与文本域100%宽度显示截图缩略图

    demo中,上面一个例子是仅边框是固定像素值;下面一个是边框以及左右padding都是固定数值。都实现了良好的100%自适应,兼容IE6以及IE7浏览器。

    原理(见下图圈中,不言而喻):

    然而,在实际的项目中,我并不经常使用上面的方法。一是牵扯父标签;二是牵扯计算;三是无法大范围重用(原因是父标签的padding值设置受限)。



    展开全文
  • 序上次的提到了H5移动前端完美布局之-margin百分比的使用margin-top(left,right,bottom)的百分比在移动页面布局对上下左右距离的处理,攻下城外再攘城内,今天看看padding在页面布局所发挥的的作用。...


    上次的提到了H5移动前端完美布局之-margin百分比的使用margin-top(left,right,bottom)的百分比在移动页面布局中对上下左右距离的处理,攻下城外再攘城内,今天看看padding在页面布局中所发挥的的作用。

    背景

    在 平时的开发中我们可能会遇到说一个150*150正方形的块,或者一个button,这样我们就会发现两个问题,如果用px写死的话,那如何响应所有设 备,2如果用百分比的话,宽度可控,那高度呢,今天我们来探讨下经常使用的padding在布局中的强大作用 这个方法的使用会让你的移动前端布局响应更灵活。

    DEMO

    实现

    跟之前的margin类似 margin是外边距 padding是内边距,我们依然使用百分比 ,记住百分比都是相对于父级而言的,我们先来个响应的正方形看看
    style

    html,body{ width:100%;}
    .rel { position:relative}

    .f-child { width:48%; height:0; padding-top:48%; background:#ddd; }

    html

    <body>
    <
    div class="rel f-child"></div>
    </body>

    iphone5

    iphone6

    可以看出使用padding-top可以实现正方形并且响应不同设备,为什么padding-top可以呢,我们可以联系margin,margin是外边距 而padding是内边距,padding是相对于自身的,当width为body的48%;而padding-top的百分比也是相对于父级的宽度的(同margin) 所以padding-top:48%的高度就是body宽度的48%;所以f-child的width和padding-top都是body的48%; padding-top是相对自身撑开的 所以widht==height 也就成了正方形,并且百分比响应。

    以此类推

    宽度大于高度

    高度大于宽度

     

    此刻我们只是实现了自己想要的形状,但是这个外壳里面是要装东西的,比如图片,但是padding后占有了内部空间,直接将图片放进去的话,图片会下沉,所以我们要如下设置才能真正实现

    <div class='rel f-child'>
        <img src="../statics/img/leinov.jpg" alt="">
    </div>

    所以我们的用定位改变布局流,让图片在我们的外壳内显示

    html

    <div class='rel f-child'>
        <div class="pabs w100 h100">
            <img src="../statics/img/leinov.jpg" alt="">
        </div>
    </div> 

    style

    .f-child{  
            width: 48%; 
            height: 0; 
            padding-top: 48%; 
            background: #ddd
        }
     .rel{ position: relative;}
     .pabs{ position: absolute; left: 0; top:0;}
     .w100{ width: 100%;}
     .h100{ height: 100%;}
     img{width: 100%;}

    我们将外层形状的position设为relative 内层再加一层div让其position为absolute,left:0,top:0 相对于父级绝对定位 再将宽度高度设为100%;完全撑开到跟父级大小一样,这样就可以在这样一个内部的盒子里放正方形的图片了。 当我们拿到psd后测量宽高度再计算下百分比,配合之前的margin就可以完全实现设计稿并且响应了

     详见padding-top用法

    展开全文
  • IE11浏览器很多默认的样式跟别的浏览器不同,而且最明显的一点应该是padding左右内边距往往比别的浏览器大了一倍。当需要修改的时候时,改变原有的padding值在IE11生效了,那别的浏览器又有问题了。  解决方法一:...

    IE11浏览器很多默认的样式跟别的浏览器不同,而且最明显的一点应该是padding左右内边距往往比别的浏览器大了一倍。当需要修改的时候时,改变原有的padding值在IE11生效了,那别的浏览器又有问题了。

       解决方法一:

       在CSS样式文件中加一个@media screenand(-ms-high-contrast:active),(-ms-high-contrast:none){样式}

        比如,在chrome浏览器中给一个div设置样式

      div{

        padding:012px;

      }

      那么,在IE11中想要实现上面效果,需要在这个下面再添加一行样式  

      div{

        padding:0 12px;

      }

      @media screenand(-ms-high-contrast:active),(-ms-high-contrast:none) {

        div{padding:0 6px;}

    }

    注:IE11的样式要写在最后面防止被覆盖。

    解决方法二:

    * {
          box-sizing: content-box;
          -moz-box-sizing: inherit;
          -webkit-box-sizing: inherit;
       }


    其他:

    IE11-h5表单验证,验证失败后input会出现红色框。针对该input添加属性 input{outline:none},即可去掉红的边框。



    展开全文
  • input标签默认的距离...设置padding-left后 宽度会发生变化; 解决办法: -webkit-box-sizing: border-box;//谷歌浏览器 -moz-box-sizing: border-box;//火狐浏览器 box-sizing: border-box;//其它浏览器  ...

    input标签默认的距离左边距太近,输入文字后不美观;设置padding-left后 宽度会发生变化;

    解决办法:

    -webkit-box-sizing: border-box;//谷歌浏览器
    -moz-box-sizing: border-box;//火狐浏览器
    box-sizing: border-box;//其它浏览器



     

    展开全文
  • H5中拖放效果

    千次阅读 2017-08-30 10:06:12
    代码附上: #div1 { width:198px;...padding:10px; border:1px solid #aaaaaa; } function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setDat
  • H5中的盒模型

    2020-02-23 18:59:54
    而盒子里的货物和盒子本身的空隙,称之为内填充(padding),也相当于补白;盒子的自身就如同边框一样(border)。同时,在两个盒子之间的距离为外边距(margin),这就是盒模型。 盒模型图 盒模型的组成 1、盒模型...
  • h5中div边距去除

    2019-07-22 23:13:00
    style样式里面加上 <style> *{ margin:0 ;//外边距为0 padding:0;//内边距为0 } </style> 转载于:https://www.cnblogs.com/xy88/p/11229148.html...
  • padding:定义元素边框与元素内容...在css加上padding-top:50px;设置后的运行结果图: 在css加上margin-top:50px;的运行结果图如下: padding和margin属性都可以设置4个值,分别是top right left bottom...
  • 浅析easyui的readonly和h5中的readonly

    千次阅读 2018-07-28 23:09:52
    在使用easyui的过程,有时会将input框的readonly属性和easyui的readonly属性混用,然后动态修改这一状态,但在easyui如果使用h5的readonly属性,使用removeProp("readonly");方法后,虽然input框可以...
  • H5中的特性 background-origin 与 background-clip 最近做了小案例遇到了这两个属性,正好复习下 background-origin: 表示的是图片从哪里开始显示 有三个值:padding-box ; border-box; content-box : ...
  • H5 div标签及其属性

    千次阅读 2018-10-15 22:55:43
    padding:20px;border-radius:10px;border:10px solid #EE872A;">这是一个框框 ;position:absolute;left:120px;width:100px;height:300px;background-color:red"> 标签的颜色和样式 ;">层层叠叠的标签 ;height:...
  • h5中的30种选择器

    万次阅读 2016-07-28 20:29:10
    看到的一篇关于h5选择器的文章,分享给大家,现在只学了几种常用和简单的,也许下面的以后会用得到。 大概大家读知道`id`,`class`以及`descendant`选择器,并且整体都在使用它们,那么你正在错误拥有更大级别的...
  • h5学习之8(html的盒模型)

    千次阅读 2016-12-12 21:53:50
    html的盒模型 margin border padding
  • h5中实现水平滚动菜单

    千次阅读 2018-11-09 17:52:29
    ... padding: 0 1.5rem; min-width: 6rem; text-align: center; } .topic-name.active { box-sizing: border-box; border-bottom: 4px solid #fff; height: 100%; color: #fff; }  
  • H5中使用JS实现简易日历

    千次阅读 2016-08-02 16:20:00
    1、this:当前发生事件的元素2、value:改变标签里的内容(给input使用) innerHTML:也改变标签里的内容(但是针对div、span等标签)3、数组的定义与... -问题:连接的优先级(从前往后相加)<!DOCTYPE html> <he
  • H5中自定义属性实现tab栏切换案例

    千次阅读 2018-04-17 01:21:54
    H5规范:data-* 属性以data-开头,其格式如下data-*=”xxx” &lt;div id="demo" data-myname="userName" data-age="10"&gt; Node.dataset是以对象形式存在的,当我们为同...
  • 关于h5中meta标签的使用

    千次阅读 2016-02-01 10:34:11
    制作手机版网站的时候,...对于桌面平台web布局大家对meta标签再熟悉不过了,它永远位于 head 元素内部,做SEO的朋友一定对meta有种特殊的感情吧,之前HTML5中国分享过Meta标签与搜索引擎优化一文,文中列举出网页
  • H5新特性

    千次阅读 2018-06-11 11:36:14
    H5新特性 HTML是用来表示一个网页架构的,其中的语义标签便是骨架。HTML5是一个新的网络标准,他不在遵循SGML(标准通用标记语言),所以不在需要DTD的声明。 1 基础语义标签: &lt;command&gt;定义命令...
  • H5在网页拖放图片

    千次阅读 2018-08-02 17:41:26
    H5中实现拖放效果,常用的实现方法是利用事件drag和drop; 1.设置元素为可拖放。 &lt;img draggable="true"/&gt; 2.第二步:拖动什么 实现拖放的第二步就是设置拖动的元素,常见的元素有图片,...
  • h5贪吃蛇

    千次阅读 多人点赞 2021-01-17 17:15:24
    h5制作贪吃蛇htmlcssjs游戏效果 使用canvas制作的一个贪吃蛇小游戏,写了一写比较简单的算法,望大佬们多多指正!!!多的不说直接看代码吧。 ...规划一个游戏界面 <div class="mian">... padding: 0; margin: 0;
  • H5性能优化方案

    千次阅读 2016-08-17 18:06:07
    H5性能优化意义对于一个H5的产品,功能无疑很重要,但是性能同样是用户体验不可或缺的一环。原本H5的渲染性能就不及native的app,如果不把性能优化做起来,将极大地影响用户使用产品的积极性。用户感受当用户能够...
  • MUI等待框的H5实现

    千次阅读 2018-06-07 16:56:24
    MUI等待框的H5实现MUI没有内置的那个弹出转圈圈的那个等待框,那个nativeui.showwaiting是只能用于app的,不能用在H5网页的,网上找了下,找到个别人已经写好的,自己 测试了下没问题,先记下来@{ Layout = ...
  • 本篇文章主要说两个问题(移动端的H5页面): 1、在父子级嵌套的情况下,子级的margin-top会对父级产生影响; 2、根节点div的height=100vh时候,margin-bottom在浏览器正常,在手机上不生效; 在两个容器嵌套...
  • ul的padding-left:40px使用 * {...} ,或者用这个body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, table, th, td {margin:
  • padding: 10px; width: 400px; border: 2px solid #ccc; position: relative; } .div1 { width: 100px; height: 50px; border: 2px solid red; } .div2 { width: 100px; height: 50px; border: 2px solid red; ...
  • H5 基础机器猫

    2018-06-28 13:04:38
    基础游戏开发H5机器猫<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>机器猫</title><styletype="text/css">*{margin:0;padding:0;}.whole{width:800px;margin:20...
  • H5动画

    千次阅读 2020-12-07 17:47:42
    不定期分享在学习H5过程自我感觉挺有意思的效果; 提示:以下是本篇文章正文内容。 一、动画(展示) 二、代码 代码如下(示例): <!DOCTYPE html> <html lang="zh-cn"> <head> <meta ...
  • webapp h5项目踩过的坑及解决办法

    千次阅读 2018-06-07 11:01:38
    1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题?首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成...(2) 在滚动的容器增加:-webkit-overflow-scrolling: touch或者给body增加:body {ov...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 41,811
精华内容 16,724
关键字:

h5中的padding