关于IE10下面文本输入框的叉叉问题。

最新推荐文章于 2022-08-10 14:23:48 发布
原创 最新推荐文章于 2022-08-10 14:23:48 发布 · 2.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#自带清除文本 #css #input #IE10

项目涉及到删除文本框内容触发事件，在IE10下面文本框自带一个叉叉键，与自定义叉叉键冲突，故寻觅解决方案如下：
input::-ms-clear{display:none;}
input后面是两个冒号。
去掉IE浏览器中input的叉叉
liuhao9999的博客
03-07 931
/*去掉IE11的叉叉*/ input::-ms-clear, select::-ms-expand { display: none; }
用jquery快速解决IE输入框不能输入的问题
11-22
在IE10以上版本，微软为了提高IE输入框的便利性，增加了文本内容全部删除和密码眼睛功能，但是有些时候打开新的页面里，输入框却被锁定无法编辑，需要刷新一下页面，或者如果输入框有内容需要点击一下输入框后面的叉...
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
08-31
从IE 10开始，type=”text” 的 input 在用户输入内容后，会自动产生一个小叉叉（X），方便用户点击清除已经输入的文本，下面通过本文给大家介绍下如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
监听IE9中输入框点击小叉
hw1287789687的专栏
11-07 330
监听IE9中点击输入框小叉事件 唯一触发的事件是onmousedown 但是却无法实时获取文本框的值,所以需要使用setTimeout,    
去掉IE自带的输入框中的x号
luckyxl029的博客
01-24 2268
IE浏览器会自动给Input等输入框的最右边加上一个x号，如果要去掉的话，在CSS文件里加上如下代码即可。 ::-ms-clear, ::-ms-reveal{display: none !important;}
element el-dialog 对话框 含有form表单时，输入内容点击右上角的叉号无法清空表单bug
前端大白话
06-25 1567
element el-dialog 对话框 含有form表单时，输入内容点击右上角的叉号无法清空表单bug 解决方法： 使用 el-dialog 自带before-close属性进行配置清空 before-close： 关闭前的回调，会暂停 Dialog 的关闭 function(done)，done 用于关闭 Dialog 方法名 (done) { 这里进行配置 。 } ...
u-input控件右侧的叉子失效问题解决
知识搬运工，资料任你拿，包括书籍、电影、电视剧、网站、软件等，VX公人人人号：向前书局
08-10 1325
u-input控件右侧的叉子失效问题解决
jQuery如何解决IE输入框不能输入的问题
11-25
在IE10以上版本，微软为了提高IE输入框的便利性，增加了文本内容全部删除和密码眼睛功能，但是有些时候打开新的页面里，输入框却被锁定无法编辑，需要刷新一下页面，或者如果输入框有内容需要点击一下输入框后面的叉...
ie 浏览器input框会出现小叉叉的问题
依然范特西
05-18 8323
隐藏小叉叉：    IE10+/** 文本输入框的 X **/input::-ms-clear{display: none;} /** 密码输入框的 X **/input::-ms-reveal{display: none;}IE9- 将input框的宽度设为82px以下就没有了...
IE input X 去掉文本框的叉叉和密码输入框的眼睛图标
热门推荐
sunny327的专栏
07-22 2万+
IE input X 去掉文本框的叉叉和密码输入框的眼睛图标 从IE 10开始，type=”text” 的 input 在用户输入内容后，会自动产生一个小叉叉（X），方便用户点击清除已经输入的文本。 对于type=”password”的 input 则会在右方显示一个小眼睛的图标，占击这个图标可以显示已经输入的内容。 好是好，但有时候会画蛇添足，比如已经用js控制了这个功能的时候。
清除IE下的文本框叉号
MrLiber的博客
10-26 1809
input[type=text]::-ms-clear{display: none;} 以上
去除input在ie浏览器下出现X号(差号)
qq_32180959的博客
03-22 3231
直接在jsp页面加上： ::-ms-clear, ::-ms-reveal{display: none;} 就ok了
用jquery解决IE输入框不能输入的问题
u011727893的博客
10-05 421
 在IE10以上版本，微软为了提高IE输入框的便利性，增加了文本内容全部删除和密码眼睛功能，但是有些时候打开新的页面里，输入框却被锁定无法编辑，需要刷新一下页面，或者如果输入框有内容需要点击一下输入框后面的叉叉后才能输入。但是我们需要的是当下需要输入内容。那怎么办呢？可以用下面的方法解决： $("input[type='text']").each(function () {    
IE11中input输入内容时，去除右侧出现的小差号解决方案
1073960086的博客
04-26 1306
项目中遇到的解决方法，去除多余的input。 /*去掉IE浏览器的input框的清空*/ input[type=text]::-ms-clear{display: none;}
align-items：flex-start flex-end stretch baseline
最新发布
05-03
<think>好的，用户现在想了解CSS中`align-items`的不同属性值的用法，特别是`flex-start`、`flex-end`、`stretch`、`baseline`之间的区别。用户之前已经询问过`justify-content`的`space-around`属性，现在转向了交叉轴对齐相关的属性。我需要结合之前的回答和提供的引用内容，详细解释每个属性值的用途和效果。 首先，我需要确认`align-items`的作用。根据引用[1]，`align-items`用于定义项目在交叉轴上的对齐方式。交叉轴的方向取决于`flex-direction`，如果是行方向，那么交叉轴就是垂直方向。所以，这个属性控制的是垂直方向的对齐。 接下来要逐个分析每个属性值： 1. **flex-start**：引用[1]提到它让项目在交叉轴起点对齐。例如，如果交叉轴是垂直方向，那么项目会顶部对齐。需要解释这个效果，可能用代码示例展示。 2. **flex-end**：同样引用[1]，项目在交叉轴终点对齐，比如底部对齐。同样需要示例说明。 3. **center**：居中对齐，这在之前的回答中用户可能已经看到过，比如引用[4]中的例子，body使用`align-items: center`实现垂直居中。这里需要强调居中的效果，并与其他值对比。 4. **stretch**：默认值，项目被拉伸以填满容器。但要注意项目是否有固定尺寸，比如高度是否被设置，否则才会拉伸。引用[5]中的例子可能没有设置高度，所以项目会拉伸。 5. **baseline**：项目按基线对齐，这在文本对齐时很重要。例如，不同字号的文本会按基线对齐，而不是顶部或底部。需要示例说明，可能用不同字体大小的项目展示效果。 然后要对比这些值的区别，尤其是`stretch`和其他的不同，以及`baseline`与其他值的差异。同时，需要注意`align-items`和`align-content`的区别，根据引用[2]和[3]，`align-content`适用于多行情况，而`align-items`适用于单行和多行的每个项目。但用户的问题集中在`align-items`，所以可能需要简要提及两者的不同，但重点在属性值。 此外，用户可能容易混淆`align-items`和`justify-content`，之前在回答`space-around`时提到过`justify-content`是主轴对齐，而`align-items`是交叉轴。需要明确这一点，避免混淆。 还需要考虑实际应用场景，比如导航栏使用`center`垂直居中，表单元素使用`baseline`对齐输入框和标签。这些例子能帮助用户理解何时使用哪个值。 最后，生成相关问题，可能包括与其他属性的对比，或者实际应用中的问题，比如如何实现特定布局，或者不同属性值的兼容性问题（如引用[5]提到IE10及更早不支持`align-items`）。</think>### CSS `align-items` 属性详解 `align-items` 控制 **Flex容器内项目在交叉轴（垂直方向默认）的对齐方式**[^1][^4]。以下是其属性值的用法与区别： --- ### 一、核心属性值对比 | 属性值 | 作用规则 | 视觉特征 | |--------------|--------------------------------------------------------------------------|------------------------------| | `flex-start` | 项目对齐到交叉轴起点（顶部对齐，默认方向下） | 所有项目顶部平齐 | | `flex-end` | 项目对齐到交叉轴终点（底部对齐） | 所有项目底部平齐 | | `center` | 项目在交叉轴居中 | 整体垂直居中 | | `stretch` | **默认值**，拉伸项目高度至填满容器（需无固定高度约束） | 项目高度=容器高度（未设置时）| | `baseline` | 项目按第一行文本基线对齐 | 文字基线对齐 | --- ### 二、具体用法示例 #### 1. `flex-start`（顶部对齐） ```css .container { display: flex; align-items: flex-start; /* 项目顶部对齐 */ height: 200px; /* 需设置容器高度 */ } ``` **效果**： ``` ┌─────────────┐ │ [Item1] │ │ [Item2] │ └─────────────┘ ``` #### 2. `flex-end`（底部对齐） ```css .container { display: flex; align-items: flex-end; /* 项目底部对齐 */ } ``` **效果**： ``` ┌─────────────┐ │ │ │ [Item1][Item2] └─────────────┘ ``` #### 3. `center`（垂直居中） ```css .container { display: flex; align-items: center; /* 经典垂直居中方案 */ } ``` **效果**（引用[4]修改版）： ``` ┌─────────────┐ │ [Item1] │ │ [Item2] │ └─────────────┘ ``` #### 4. `stretch`（拉伸填充） ```css .container { display: flex; align-items: stretch; /* 项目高度自动拉伸 */ } .item { /* 不设置height属性 */ } ``` **效果**：所有项目高度=容器高度（若未显式定义项目高度）[^5]。 #### 5. `baseline`（基线对齐） ```css .container { display: flex; align-items: baseline; /* 文本基线对齐 */ } .item1 { font-size: 16px; } .item2 { font-size: 24px; } ``` **效果**： ``` ┌─────────────┐ | [Small] | |────[LargeText] └─────────────┘ ``` --- ### 三、重点区别解析 1. **`stretch` vs 其他值** - `stretch`依赖容器高度和项目的未固定尺寸 - 若项目显式设置高度（如`height: 50px`），则`stretch`失效 2. **`baseline`的特殊性** - 仅对文本内容生效，适合表单控件与标签混合排版 - 对比`flex-start`：基线对齐可能造成容器顶部留白更大 3. **与`align-content`的差异**[^2][^3] - `align-items`：控制单行/多行中每个项目的对齐 - `align-content`：仅多行生效，控制行与行之间的整体对齐 --- ### 四、典型应用场景 1. 导航栏按钮垂直居中 → `align-items: center` 2. 表单标签与输入框基线对齐 → `align-items: baseline` 3. 等高卡片布局 → `align-items: stretch`（需配合`flex-direction: row`） ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值