html - 带有 的 CSS 下拉菜单在 IE 中不可用

转载 作者：可可西里 更新时间：2023-11-01 14:54:34 24 4

工作中的一位客户要求我们将表单转换为导航中的下拉菜单。本身不是问题，但是我们这里不允许使用任何JS。如果我们无法提出任何其他解决方案，尽管他们将允许一个小的普通 JS 脚本来处理该问题。

问题

表单上的输入无法在 Internet Explorer 中使用，因为在单击表单元素时整个菜单会隐藏。

我做了一个JS Fiddle的问题，并感谢任何人可以在这里提供的帮助。 HTML/CSS 不是我自己的。它已经在元素中了，不幸的是我不能将它进一步剥离，否则站点的其他部分会中断。

我已经在下面发布了 HTML/CSS，供那些宁愿在这里阅读而不是在 JS Fiddle 上阅读的人使用。

HTML:

<div class="head-basket">
   <div class="button">Shopping Basket</div>

   <div class="basket-container">
      <form method="post" action="#" enctype="multipart/form-data">
         <div><input type="hidden" name="basket" value="1" /></div>
         <table cellspacing="0" cellpadding="0" border="0">
            <tbody>
               <tr class="product-row">
                  <td class="item"><a href="/?r=238637" title="remove Dickies Redhawk Super Work Trousers with Free Knee Pads" class="rem">x</a><a href="/dickies-workwear/dickies-knee-pad-trousers/dickies-redhawk-super-work-trousers-with-free-knee-pads-p545.htm">Dickies Redhawk Super Work Trousers with Free Knee Pads</a></td>
                  <td class="quantity">
                     <select name="q238637" id="q238637" class="do-change">
                        <option value="1" selected="selected">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        ...
                     </select>
                  </td>
               </tr>
               <tr class="product-desc">
                  <td class="item" colspan="2"><span>Waist Size: 30", Leg Length: 30", Colour: Black</span></td>
               </tr>
               <tr class="tax-row">
                  <td colspan="3"><span>Item total:</span>£14.99</td>
               </tr>
               <tr class="tax-row">
                  <td colspan="3"><span>UK tax at 20%:</span>£3.00</td>
               </tr>
               <tr class="total-row">
                  <th colspan="3"><span>Total:</span> £17.99</th>
               </tr>
               <tr class="spacer-row">
                  <td colspan="3"> </td>
               </tr>
               <tr class="delivery info-row">
                  <td colspan="3">
                     <p><span class="bold">Free Delivery</span> to England for orders over <span class="bold">£90.00</span> (excluding tax). </p>
                     <p>Spend another <span class="bold">£75.01</span> to qualify!</p>
                  </td>
               </tr>
            </tbody>
         </table>
         <div class="buttons">
            <noscript><div><input type="submit" class="button update" value="Update" /></div></noscript>
            <a href="/your-basket/" class="button tobasket action" rel="nofollow"><tt>Proceed to Secure</tt>Checkout</a>
         </div>
      </form>
   </div>
</div>​ 

还有 CSS:

.head-basket {
    position: absolute;
    z-index: 1000;
    width: 190px;
    right: 0;
    top: 23px;
}

.head-basket .button {
    width: 90%;
    border: none;
    padding: 5%;
    text-align: center;
}

.head-basket .button:hover {
    border-bottom: none;
    box-shadow: none;
}

.head-basket:hover .button {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: #fff;
    border-bottom: none;
}

.head-basket .basket-container {
    background: #fff;
    border: 2px solid #000002;
    display: none;
    padding: 3px;
}
.head-basket:hover .basket-container, .head-basket:active .basket-container, .head-basket .basket-container:active, .head-basket .basket-container:hover {
    background: #fff;
    display: block;
}


button, .button, .button:visited {
        display: inline-block;
        padding: 8px 15px;
        line-height: normal;
        position: relative;
        white-space: nowrap;
        font-size: 12px;
        font-weight: bold;
        color: #aaa;
        background: #000002;
        background: -moz-linear-gradient(#383834,#222222);
        background: -webkit-linear-gradient(#383834,#222222);
        -ms-filter: "progid:dximagetransform.microsoft.gradient(startcolorstr='#383834',endcolorstr='#222222')";
        filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#383834',endcolorstr='#222222');
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        border: 1px solid #111;
        border-bottom-color: #555;
        border-left-color: #555;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        text-decoration: none;
        text-align: left;
        border-width: 2px
}

button:hover, .button:hover {
        text-decoration: none; 
        -webkit-box-shadow: 0 1px 1px #c6c6c6; 
        -moz-box-shadow: 0 1px 1px #c6c6c6; 
        box-shadow: 0 1px 1px #c6c6c6; 
        color: #fff !important;
}

button:focus, .button:focus { 
        outline: 0; 
}

button:active, .button:active { 
        -webkit-box-shadow: inset 0 1px 2px #c6c6c6; 
        -moz-box-shadow: inset 0 1px 2px #c6c6c6; 
        box-shadow: inset 0 1px 2px #c6c6c6;
}​

最佳答案

IE9 可以使用 :target 选择器。在您的示例中，您将 div.button 替换为 a.button:

   <a href="#basket-container" class="button">Shopping Basket</a>

将 anchor 添加到 div.basket-container:

<div class="basket-container" id="basket-container">
...
</div>

然后使用 :target 选择器打开下拉列表:

.head-basket .basket-container:target {
    background: #fff;
    display: block;
}

http://jsfiddle.net/HssXt/10/

http://www.quirksmode.org/css/contents.html#t316

不过，您将需要一些额外的关闭按钮来从该目标中删除散列。而在这种情况下，IE8及以下版本仍然无法获得任何解决方案。

所以这是不可避免的。您要么使用 JS 添加一些“事件”类，要么用文本输入替换选择。

要考虑的另一件事是从下拉列表中完全删除该选择输入。改变购物车下拉列表中的数量对我来说似乎是一个非常罕见的用例。而且该功能无论如何都会出现在结帐页面上(会吗？)，因此您可以简化界面并同时解决问题。

关于html - 带有 <select> 的 CSS 下拉菜单在 IE 中不可用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12623541/

24 4 0

文章推荐： 使用 Flume/Hadoop 时 Ubuntu 中的 Java 内存不足异常

文章推荐： c++ - uint32_t 析构函数返回值

文章推荐： java - 如何在 hadoop 作业中将 'Text' 作为 Mapper 输入键传递？

文章推荐： c++ - 取消 C++ 11 异步任务

• python - 不可 JSON 序列化的项目的管道

  我正在尝试将抓取的 xml 输出写入 json。由于项目不可序列化，抓取失败。 从这个问题来看，它建议您需要构建一个管道，未提供的答案超出了问题 SO scrapy serializer 的范围。 所

• c++ - 参数的重载函数(不可)在编译时推导

  有没有一种方法可以通过重载函数来区分参数是在编译时可评估还是仅在运行时可评估？ 假设我有以下功能: std::string lookup(int x) { return table::va

• wpf - 为什么 CompositeCollection 不可 Freezable？

  我正在使用 MVVM 模式编写一个应用程序。我通过将 View 的 DataContext 属性设置为 ViewModel 的实例来向 View 提供数据。一般来说，我只是从那里使用 Binding

• python - 字节串怎样才能很好的存储呢？ - 不可 JSON 序列化 -

  对于一个项目，我正在使用带有简单 python module 的传感器收集多个红外命令。 . 我收到如下字节字符串: commando1= b'7g4770CQfwCTVT9bQDAzVEBMagGR

• python - Decimal 不可 JSON 序列化

  我有一个计算方法，可以在用户使用 Cartridge 作为我的商店框架结账时计算税费。 税 = 税 * 小数(str(settings.SHOP_DEFAULT_TAX_RATE)) 计算工作正常。然

• python - pickle 不可 pickle 的对象

  我正在用 pygame 制作一个绘图程序，我想在其中为用户提供一个选项来保存程序的确切状态，然后在稍后重新加载它。在这一点上，我保存了我的全局字典的副本，然后遍历， pickle 每个对象。 pyga

• c++ - 使类不可复制*和*不可 move

  在 C++11 之前，我可以使用它来使类不可复制: private: MyClass(const MyClass&); MyClass& operator=(const MyClass&); 使用 C

• c++ - LinearHashTable iter 不可取消引用且 iter 不可

  大家好 :) 我在我的 VC++ 项目中使用 1.5.4-all (2014-10-22)(适用于 x86 平台的 Microsoft Visual C++ 编译器 18.00.21005.1)。 我

• python - TypeError : array([ 0.]) 不可 JSON 序列化

  我有一个 python 文件:analysis.py: def svm_analyze_AHE(file_name): # obtain abp file testdata = pd.

• python - 不可 JSON 序列化 - Python + Flask + Sqlalchemy

  这个问题已经有答案了: How to serialize SqlAlchemy result to JSON? (37 个回答) 已关闭 4 年前。 我正在编写小查询来从 mysql 获取数据数据库，

• python - TypeError : {1, 3} 不可 JSON 序列化

  我是 Python 初学者，我在 JSON 方面遇到了一些问题。在我正在使用的教程中有两个函数: def read_json(filename): data = [] if os.pa

• javascript - 如何使 HTML 元素在 iPad 上**不可**旋转？

  我目前正在开发一个针对 iPad 的基于 HTML5 Canvas/JavaScript 的小型绘图应用程序。它在 Safari 中运行。到目前为止，除了一件事之外，一切都进展顺利。 如果我旋转设备，

• c++ - 不可 move -不可复制对象的 vector 的 move 分配不编译

  以下代码无法使用 Visual Studio 2013 编译: #include struct X { X() = default; X(const X&) = delete;

• python - TypeError : array( ['cycling' ], dtype=object) 不可 JSON 序列化

  嗨，我制作了一个文本分类分类器，我在其中使用了它，它返回一个数组，我想返回 jsonresponse，但最后一行代码给我错误 'array(['cycling'], dtype =object) 不可

• python - TypeError : sqlalchemy. orm.attributes.InstrumentedAttribute 对象位于 0x7f86789f9bf8 不可 JSON 序列化

  我使用 Flask 和 Flask-Login 进行用户身份验证。 Flask-Sqlalchemy 将这些模型存储在 sqlite 数据库中: ROLE_USER = 0 ROLE_ADMIN =

• python - 如何将 Python 对象(不可 JSON 序列化)从一个 (AWS) lambda 函数传递到另一个？

  如果您尝试发送不可 JSON 序列化的对象(列表、字典、整数等以外的任何对象)，您会收到以下错误消息: "errorMessage": "Object of type set is not JSON

• c++ - 如果 T 不可 move ，则 std::vector 是否可 move ？

  我在尝试 move std::vector 时遇到崩溃其中 T显然是不可 move 的(没有定义 move 构造函数/赋值运算符，它包含内部指针) 但为什么 vector 的 move 函数要调用 T

• python - jwt.encode 失败，显示 "Object of type ' 字节“不可 JSON 序列化”

  我尝试在用户成功登录后将 token 返回给他们，但不断收到以下错误: 类型错误:“字节”类型的对象不可 JSON 序列化 我该如何解决这个问题？这是我到目前为止的代码: if user:

可可西里

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

• android - RelativeLayout 背景可绘制重叠内容
• android - 如何链接 cpufeatures lib 以获取 native android 库？
• java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
• java - Android 文件转字符串

滴滴打车优惠券免费领取

全站热门文章

• 中间件vs过滤器
• shell脚本快速检查192.168.1网段ip是否在用
• ASP.NETCore-日志记录系统(二)
• 抛物流线参数化方程推导——从几何性质到代码实现
• 【C语言学习】——命令行编译运行C语言程序的完整流程
• 让LLM来评判|基础概念
• Pulsar客户端如何控制内存使用
• G1原理—4.G1垃圾回收的过程之YoungGC
• 利用mybatis拦截器记录sql，辅助我们建立索引(一)
• C#实现Winform程序在系统托盘显示图标&开机自启动

Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com