html - 在 IE 中选择具有固定宽度截断内容的下拉列表-6ren

html - 在 IE 中选择具有固定宽度截断内容的下拉列表

转载作者：技术小花猫更新时间：2023-10-29 11:33:51

24

4

问题:

选择中的某些元素需要超过 145px 的指定宽度才能完全显示。

Firefox 行为:点击选择显示下拉元素列表调整为最长元素的宽度。

IE6 和 IE7 行为:点击选择显示下拉元素列表限制为 145 像素宽度，因此无法阅读较长的元素。

当前的 UI 要求我们在 145 像素内适应这个下拉菜单，并让它承载具有更长描述的元素。

关于解决 IE 问题的任何建议？

即使展开列表，顶部元素也应保持 145 像素宽。

谢谢!

CSS:

select.center_pull {
    background:#eeeeee none repeat scroll 0 0;
    border:1px solid #7E7E7E;
    color:#333333;
    font-size:12px;
    margin-bottom:4px;
    margin-right:4px;
    margin-top:4px;
    width:145px;
}

这里是select input的代码(此时还没有定义backend_dropbox样式)

<select id="select_1" class="center_pull backend_dropbox" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>

如果你想在浏览器中快速测试，完整的 html 页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dropdown test</title>

<style type="text/css">
<!--
select.center_pull {
    background:#eeeeee none repeat scroll 0 0;
    border:1px solid #7E7E7E;
    color:#333333;
    font-size:12px;
    margin-bottom:4px;
    margin-right:4px;
    margin-top:4px;
    width:145px;
}
-->
</style>
</head>

<body>
<p>Select width test</p>
<form id="form1" name="form1" method="post" action="">
<select id="select_1" class="center_pull backend_dropbox" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>
</form>
</body>
</html>

最佳答案

对于 IE 8，有一个简单的纯基于 css 的解决方案:

select:focus {
    width: auto;
    position: relative;
}

(如果选择框是固定宽度的容器的子项，则需要设置位置属性。)

很遗憾，IE 7 及更低版本不支持 :focus 选择器。

关于html - 在 IE 中选择具有固定宽度截断内容的下拉列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/682764/

24

4

0

文章推荐： java - java中的linux shell脚本

文章推荐： regex - 如何在 grep 的输出前加上标签？

文章推荐： css - p :growl 的自定义定位

netcdf - 截断 netCDF
我有一个 1850-2005 年月地表气温的 netCDF 文件。如何在 unix 中截断文件，以便新文件的时间维度从 1855 年到 2005 年？反之亦然，截断文件，使其改为 1850-2000？
sql - 批量加载数据转换错误(截断)
我收到此错误 Bulk load data conversion error (truncation) for row 1, column 12 (is_download) 这是 csv...它只有一
python - 截断/修剪列表每一行的日期和时间
我有一个列表，它是电子邮件正文，每行末尾都有一个日期和时间戳。邮票的格式是一致的，所以可以从右边计算表达式。以下是示例数据: Dear Volunteer2018-05-21 19:59:15 You
Django HTML 截断
我正在使用内置 truncatewords_html Django 的过滤器，它在最后添加了“...”，相反，我想用“查看更多”链接替换它。我怎样才能做到这一点？最佳答案最好编写自己的过滤器。您
sql - ORA删除/截断
我正在使用 SQL 加载器将我的数据加载到数据库中。在插入数据之前，我需要删除表中的现有数据: options(skip=1,load=250000,errors=0,ROWS=30000,BIND
c - 消息队列中的输出被更改/截断
我正在尝试掌握消息队列的窍门。由于某种原因，当显示我在控制台中输入的消息时，字符串有时会被截断或更改。有谁知道为什么会发生这种情况？ void *readFromQueue() { int r
mysql - 截断 mediawiki
我正在使用mediawiki API(例如http://en.wikipedia.org/w/api.php)，我希望能够“截断”mysql表以便重置本地安装，同时保留一些表(用户，？...) 。SQ
MySQL:如果存在...截断
想要截断一个存在的表: IF EXISTS(SELECT 1 FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_NAME = 'mytable') TRUNCATE
python - Numpy 截断？
我正在实现一个使用 Python Numpy 包的程序。我正在尝试修改数组的元素，以便我只需采用 elem[i][j] 并将其设置为 elem[i][j]/10。但是，我不断收到某种截断，其中元素在操
转换为较小类型时 C++ 截断
我有一个 64 位 long int，其中包含一些位域。我需要将存储在第二个和第三个字节中的 16 位带符号整数添加到一个 32 位值中。我正在使用这样的东西: u32 Function( s32 v
ios - UILabel 截断
我有这样的文字:“我的文字是 blabla blabla, lala lala”。我希望在我的 UILabel 中有这样的文本:“My text is ...lala”。如何配置我的 UILabe
html - Umbraco 截断
Umbraco Truncate 似乎不适合我，当我使用正确的代码(根据互联网)时，它会不断出错。我不知道它有什么问题。错误代码: Compiler Error Message: CS1502: T
文本溢出 CSS 截断
早些时候，我是使用 JS 动态地完成它的。但是我们遇到了一些性能问题，因为我们必须提供一个替代选项。我现在使用文本溢出样式截断选项卡名称上的长文本。但我有一个小问题，如果有人能解决的话目前这是我
ruby - 截断、事务和删除数据库策略之间的区别
使用Rspec时截断、事务和删除数据库策略有什么区别？我找不到任何资源来解释这一点。我阅读了 Database Cleaner 自述文件，但它没有解释它们各自的作用。为什么我们必须对 capybar
较完美的WordPress文章摘要(截断)方案分享
当然, 尚有诸位前辈也曾把以上三种方案结合一二, 以达到更广泛的适应度. 不过, 这厢先前在网路上搜索许久, 却未曾寻到三种方案合为一体的尝试, 于是只好自己动手写一下了:) 没有dem
hsqldb - 截断 HSQLDB 中的所有表
有没有办法截断HSQLDB中的所有表？如果这不可能，是否有任何方法可以级联删除具有外键引用的表？最佳答案可以截断模式中的所有表: 截断模式并提交此命令有一些选项在指南中有描述: http://
sql - 带有时间戳的 Oracle 截断
我有一个要截断的时间戳。我正在使用 trunc oracle中的函数。这似乎做了我想要的但是从文档中它应该只接受日期而不是时间戳 select TRUNC(TO_DATE('22-AUG-13'),
cassandra - cassandra 键空间的在线批量删除(截断)
我读到一旦你耗尽了一个节点，你就可以删除文件然后重新启动。它工作正常，但我只是通过排空所有节点，关闭整个集群，删除文件并重新启动来尝试它。如果我一次只重启一个节点会怎样？据我了解有风险重新启动的
text - 截断 d3 中的文本
我想截断 d3 中超过预定义限制的文本。我不知道该怎么做。这是我现在所拥有的: node.append("text") .attr("dx", 20) .attr("dy", ".20
WPF 文本 block 截断
嗨 Guyz 我有一个固定宽度的 WPF TextBlock 说 100 ，如果字符串不适合宽度，则最后一个字符总是被截断，因为所有字符的大小都不相同。我不想剪切字符而是我想从那里跳过文本并只显示没有

首页

博学

6Ren·AI

商城

html - 在 IE 中选择具有固定宽度截断内容的下拉列表