15

问题：

我的下拉列表是动态加载的，其中一些选项很长，这弄乱了我的页面布局。我希望select元素的大小很小，但是当展开时，允许用户看到所有 long options。为此，我已将 的 设置width为SELECT固定值，例如width:200px;

预期/期望的行为（在 Chrome 中工作）

在此处输入图像描述 IE8 中的实际行为

在此处输入图像描述

我试过的：

select{
    overflow:show;
}
option{
    overflow:show;
    width:1000px;
}

简化的小提琴：

http://jsfiddle.net/gCbhq/2/

4

6 回答 6

11

好的。不确定这是否有帮助。我正在使用 Jquery Mobile，我的选择按钮是纯图标（= 28px）。在 IE8 上，我的所有选项也都是 28px。

我用这个修复了它：

select { min-width: 150px !important; }

但这仅适用，因为 Jquery Mobile 隐藏了选择并将其自己的元素添加到“顶部”。

唉，这是一个修复 - http://css-tricks.com/select-cuts-off-options-in-ie-fix/

于 2012-12-14T20:49:00.100 回答
6

你所能做的就是破解它，让它看起来很接近。select仅通过添加/更改单独的 CSS 无法模拟 Chrome 行为。

在不添加任何其他元素的情况下，这是尽可能接近的：

http://css-tricks.com/examples/SelectCutoffFix/ （点击返回顶部文章了解实现细节）

上述解决方案是您可以根据您的要求做的最好的解决方案，即select.

如果您愿意div在（没有替换或特殊的 UI 小部件）周围添加一点样式select，您可以让它看起来更好一点：

http://www.getharvest.com/blog/wp-content/uploads/2009/12/select_box_demo.html

（详细信息：http: //www.getharvest.com/blog/2009/12/dropdown-problems-on-internet-explorer/）

该解决方案与我所看到的一样接近您正在寻找的东西。话虽这么说，这是一个黑客，并且有一些问题：

  • 如果您option连续两次选择相同的，则在焦点离开之前不会出现预期的行为select
  • 打开时select，向下箭头按钮消失（因为溢出被​​封闭的 div 隐藏）

上述解决方案会让您更接近一些，但它们看起来都不像我希望的那样优雅。但是，如果您无法向页面添加任何其他内容，那么这些将是您的最佳选择（基于过去无数小时的研究）。是的，这很糟糕，但我们都在同一条船上。

祝你好运！

于 2012-12-18T22:18:02.377 回答
2

没有一个确切的解决方案，但你可以给这个小 html 和 css hack 来实现你的目标。 HTML

<div class="divWrapper">
 <select class="selectBox">
 <option>011111111111111111111111111111111111111111111111111112</option>
 <option>011111111111111111111111111111111111111111111111111112</option>
 <option>011111111111111111111111111111111111111111111111111112</option>
 <option>011111111111111111111111111111111111111111111111111112</option>
 </select>
 </div>

CSS

.divWrapper{
    width:150px;
    overflow:hidden;
    }

.selectBox{
    width:150px;
    }

.selectBox:focus{
    width:auto;
    }

在这里，我们用一个宽度必须等于选择框 div 的 div 包装选择框。并专注于选择框使其再次自动宽度。

如果您希望 jquery 使用 jquery 部分。当您选择任何选项时，它将按照您定义的方式调整选择框的宽度。在http://jsfiddle.net/sudhanshu414/5NEWc/2/上查看

于 2012-12-21T05:48:27.480 回答
1

我无法重现该行为，但您可以在 css 中尝试：

select:focus{width:auto !important;}

但是你也可以看看JQuery-UI。

[EDIT-1-]：我试图重现 IE 的意外行为。在 7/8/9 我看不到问题。也许您正在使用一个非常旧的 IE？如果可能，请尝试运行版本 8 的更新。

你想做的事，影响深远。我不认为你可以访问孩子们改变他们的外表，同时保持 SELECT 父母在正常大小。您需要解耦这两个元素。您可以尝试为下拉列表实现自己的解决方案，但对于其他浏览器（如其他 IE 版本、Chrome 等）来说，这似乎是正常行为。这可能是浪费工作。

$(document).ready(function(){
  $('select').click( function () { 
     //Try to alter the css here - but I'm not sure if this could work.
  });

[EDIT-2-]：计划为 JQuery-UI 选择菜单。但如果您考虑使用其他 JQuery 插件，您可以使用dropkick.js或查看此列表。

于 2012-12-19T12:46:19.003 回答
1

这是我用作解决此问题的纯 css 解决方案。如果专注于选择推送任何其他页面元素，我只需 z-index 选择：焦点。如果需要，您也可以将 select:focus 宽度设置为 auto，它仍然可以工作。

<!DOCTYPE html>
<html lang="en">
  <head>
<style type="text/css">
select:focus {width:300px;}
.cover select {width: 150px;} 
</style>

  </head>
  <body>


<div class="cover">
<select>
 <option>Select Box</option>
 <option>Option One a line of text</option>
 <option>Option Two a longer line of text</option>
 <option>Option Three is a much longer line of text</option>
 <option>Option Four </option>
</select>
</div>


  </body>
</html>

如果您删除“封面”类并仅设置选择的样式，则选择也会在焦点上调整大小。所以你可以选择你希望它以哪种方式显示。

这已经在最新版本的 chrome、firefox 和 IE 中测试过了

于 2012-12-19T01:13:48.133 回答
0

不要在 IE 中单独使用 CSS，因为它或多或少是您想要设置样式的操作系统小部件。

尝试一个 selectBox，它使用 JavaScript 插入一些 HTML 和 JavaScript 来模仿 select 的行为，但使用其他 HTML 标记

https://github.com/revsystems/jQuery-SelectBox或这里
http://www.bulgaria-web-developers.com/projects/javascript/selectbox/

于 2012-12-17T16:49:56.043 回答