IE 7 和 8 中的 CSS 倾斜转换

2024-01-18

我有菱形样式的菜单,它使用以下代码。它在 Chrome、firefox、ie9 等中运行良好,但我现在需要在 IE 7 和 8 中运行! :( 有没有办法在这些旧版浏览器上执行此操作?

http://jsfiddle.net/C7e7U/ http://jsfiddle.net/C7e7U/

非常感谢

HTML:

<div id = "menu">
        <ul id="nav">
            <li class="rhombusStart">&nbsp;</li>
            <li class="rhombus"><a class="rhlink" href="#"><span>Home</span></a></li>
            <li class="rhombus"><a class="rhlink" href="#"><span>Market <br> Update</span></a></li>
            <li class="rhombus"><a class="rhlink" href="#"><span>Membership</span></a></li>
            <li class="rhombus"><a class="rhlink" href="#"><span>FISC Info</span></a>
            </li>
            <li class="rhombusEnd">&nbsp;</li>
        </ul>
    </div>

CSS

/*******************************************
 Menu Styling
*******************************************/
#menu {
    margin: 0 auto;
    padding-left: 2%;
    width: 1024px;
    height: 2.9em;
    position: relative;
    top: 0;
    background-color: rgb(255,194,14);
    border: 1px solid rgb(140,51,61);
}
#nav {
     margin:0;
     padding:0;
     list-style-type:none;
     list-style-position:outside;
     position:relative;
     height:2.9em;
     background-color: rgb(255,194,14);
}

#nav > li {
    float:left;
    position:relative;
}

#nav > li.rhombus {
    float:left;
    position: relative;
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    -o-transform-origin:0 0;
    transform-origin:0 0;
    -webkit-transform:skew(35deg);
    -moz-transform:skew(35deg);
    -ms-transform:skew(35deg);
    -o-transform:skew(35deg);
    transform:skew(35deg);
    border-right: 1px solid rgb(239,89,24);
    border-left: 1px solid rgb(255,244,80);
    background-color: rgb(255,194,14);
    font-family: Georgia;
    color: rgb(131,0,26);
    width: 8em;
    text-align: center;
    height: 2.9em;
}

li.rhombus > a span {
    -webkit-transform:skew(-35deg);
    -moz-transform:skew(-35deg);
    -ms-transform:skew(-35deg);
    -o-transform:skew(-35deg);
    transform:skew(-35deg);
    text-decoration: none;
    vertical-align: middle;
    display: table-cell;     
 }

https://github.com/visionmedia/move.js https://github.com/visionmedia/move.js只需下载并阅读其文档即可在旧浏览器中使用 CSS3

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

IE 7 和 8 中的 CSS 倾斜转换 的相关文章

  • CSS3 转换会立即发生吗?

    我有一个名为 artwork需要动画化 artwork webkit transition all 20s ease in transition all 20s ease in width 75 display block margin 0
  • 这个 CSS 选择器是什么? [类* =“跨度”]

    我在 Twitter Bootstrap 中看到了这个选择器 show grid class span background color eee text align center border radius 3px min height
  • 从 HTML div 中删除所有文本内容,但保留 HTML 标签和结构

    I have div Here a href is a p Text that I want to p be removed div I want div a href a p p div 删除所有文本但保留 HTML 结构的最简单方法是什
  • 交替 div 使图像向左(偶数)或向右(奇数)

    我正在尝试更好地排列图像 而不仅仅是一列中的图像 请参阅附件中的示例 每篇文章的图像可以位于左侧和右侧 这是我的代码 HTML section class content list page section
  • JavaScript 跨浏览器单击 HTML DOM 元素

    是否有可用的普通 JavaScript 跨浏览器函数能够触发 HTML DOM 元素 包括 div 等非表单元素 上的单击事件 大多数走这条路的人要么最终开发自己的事件管理系统 这并不难 但很烦人 要么在可用的功能范围内工作 如果所有浏览器
  • 如何使用 jQuery 在弹出窗口中预览输入类型=“文件”中选定的图像? [复制]

    这个问题在这里已经有答案了 在我的代码中 我允许用户上传图像 现在我想在同一个弹出窗口中将所选图像显示为预览 我怎样才能使用 jQuery 做到这一点 以下是我在弹出窗口中使用的输入类型 HTML 代码
  • CSS:多属性选择器

    我想设置 电子邮件 和 密码 类型的表单输入样式 但不设置其他任何样式 我正在想象类似以下的事情 input type email type password 然而 属性选择器的工作方式似乎将其解释为 输入 其中类型同时是 电子邮件 and
  • Firefox 忽略背景大小的 css

    尝试使用背景大小 CSS 规则缩小图像 但 Firefox 3 5 似乎会忽略该规则 CSS privatejoker background aqua url styles images home privatejoker png no r
  • CSS 中 calc() 的结果是什么

    我们现在已经开始使用calc 在CSS中 用于设置计算结果的宽度 例如 div div div div parent width 100px calcWidth width calc 100 3px height 100px backgro
  • 相对于变换元素的绝对定位元素位置

    我重新创建了我在模板中遇到的问题 有一个nav具有position relative 在 的里面nav有一个div有两个嵌套列表 其中一个列表的位置绝对固定在列表的底部nav 当div对其应用了变换 当 的时候div在绝对和相对定位的元素之
  • JQuery 可滚动文本

    我正在寻找一个 jquery 插件 它将在可滚动框中绑定文本 大多数滚动插件都会转换浏览器滚动条 但我想保持它的原样和可用 这只是为了在较小的空间内包含大量的文本 就像这样page http www class pm files jquer
  • 光滑的旋转木马不工作

    我一直在尝试简单地实现 Slick Carousel 的工作 我已按照 Git 页面上的说明进行操作 https github com kenwheeler slick https github com kenwheeler slick 这
  • 仅水平 CSS 视差效果,层数大于 100vw

    如何用水平引导网站仅 CSS 视差效果 要求 仅 CSS 视差 父层必须具有宽度 高度 100vw 100vh 子层的宽度 高度必须 gt 100vw 100vh child layers must visually align 100 w
  • 从网站存储数据的最简单方法(在服务器端)

    我有一个非常简单的网站 实际上是单页 有一个输入字段和一个按钮 我需要将用户提交的数据存储在服务器端的某个位置 完美的方法可能是简单的文本文件 并在每次单击按钮后附加新行 日志文件也可以 据我了解 JavaScript 本身是不可能的 我在
  • HTML 和 JavaScript - 将滚动操作从一个元素传递到另一个元素

    假设我有两个 div div div div A scrollable list div 我想让它当光标停在里面时 control并且鼠标滚轮滚动 view将会滚动 无论如何要实现这一目标 好的 快速修复对我有用 即使固定 div 不可滚动
  • xpath:选择中断标签之前和之后的文本节点

    考虑以下因素 混合 br and br text1 br text2 br text3 br text4 br text5 如何找到每个文本节点 我正在考虑符合 br 标签之前或之后的条件的东西 但不确定是否 br and br 在 xpa
  • 显示班级图片 10 秒

    我有下面给出的代码显示9 boxes 其值如下digital time 还有一个班级box002显示digits相当于随机选择的九个盒子的值 box002 can be dragged to digital time starting wi
  • `ie9` - contenteditable false 在父级可编辑时不起作用

    我正在尝试制作内容可编辑和不可编辑的容器 用户可以通过 3 种方式使用它 他们可以将内容与non editable 他们可以将内容与editable 他们可以在不选择其中之一的情况下放置内容 可编辑 我正在努力实现以下目标 content
  • 文本后面有粗下划线

    如何使用 span 和 css 在文本 ABC 后面重现这种下划线 我已经能够做下划线below嵌套的文本span和彩色的border bottom 但无法获取behind图像和above文本基线 p style font size 48p
  • 两种颜色边框

    客户想要两种颜色的边框以获得浮雕外观 我可以在一个元素上执行此操作吗 我希望避免堆叠两个具有单独边框的 DOM 元素 是的 使用outline财产 它充当您边界之外的第二个边界 但请注意 它可能会以一种奇怪的方式与边距 填充和阴影进行交互

随机推荐

  • 打开应用程序 来电或去电断开后

    我正在创建一个应用程序 我可以在其中获取通话历史记录listview 现在我正在尝试的是在任何来电或去电断开后 我想打开它listview 但我不知道我的应用程序没有打开 我的listview任何调用后都不显示页面 以下是我的代码 publ
  • 在 Android 中使用谷歌地图查找最近的餐厅、咖啡店和杂货店

    我正在 android sdk 中工作并使用谷歌地图 api 我想知道是否有任何方法可以从用户当前位置找到最近的餐厅或咖啡店或杂货店 有许多应用程序可用于此目的 但我想编写自己的应用程序以用于学习目的 这可能有帮助 不知道它是否适用于and
  • 处理 SOAP 响应

    我正在尝试处理来自 First Data 的全球网关的 SOAP 响应 我以前使用过 SoapClient 但没有 wsdl 并且该公司表示他们不提供 wsdl 我尝试了各种其他方法 例如基于此处和 PHP 手册中找到的示例的 Simple
  • 在Python中处理多个相同类型的异常并恢复执行

    看来 一旦您在 Python 中引发了用户定义的异常 就无法恢复测试的执行 但在我的场景中 我想检查不同输入值发生的错误 但当前的实现仅限于继续对不同输入向量进行错误检查 然而 在对我的问题提出某种复杂的解决方案之前 我想我应该询问专家 看
  • Robolectric 2.4 创建活动时 NoSuchMethodError 无法转换为 RuntimeException

    我开始在 Android Studio 中使用 Robolectric 起初我想使用 hamcrest 创建一个简单的测试 如下所示 RunWith CustomTestRunner class Config emulateSdk 18 p
  • 如何使WCF命名管道地址等于WinApi地址?

    我注意到WCF的命名管道地址 net pipe localhost mynamedpipe 和 Windows API pipe mynamedpipe 不要碰撞 这是为什么 我怎样才能让它们指向同一个管道 没有记录的方法可以做到这一点 经
  • 字典的匿名集合初始值设定项

    是否可以隐式声明 nextDictionary
  • 如何在 TensorFlow 中打印 Tensor 对象的值?

    我一直在使用 TensorFlow 中矩阵乘法的介绍性示例 matrix1 tf constant 3 3 matrix2 tf constant 2 2 product tf matmul matrix1 matrix2 当我打印产品时
  • 正确 Dafny 方法的 Z3 模型

    对于正确的方法 Z3能否找到该方法验证条件的模型 我原以为不会 但这里有一个例子 该方法是正确的 但验证发现了一个模型 这是 Dafny 1 9 7 的情况 Malte 所说的是正确的 我发现它也得到了很好的解释 Dafny 是健全的 因为
  • 图像属性的值 (C#)

    我正在尝试解决更改 Bitmap 对象的 ImageDescription 值的问题 添加文件的描述 搜索了相关主题 没有找到解决方案 My code public Bitmap ImageWithComment Bitmap image
  • 为什么我的 Cassandra 更新不起作用?

    我有以下 Cassandra 表 create table start stop id text start text end text price double PRIMARY KEY id start 我做了这样的插入 insert i
  • 在nodejs中获取url的响应(express/http)

    我试图在nodejs 中获取两个URL 的响应 但是http request 有问题 这是我到目前为止所拥有的 var url https www google com pretend this exists xml var opt hos
  • 样式组件中的CSS' calc() [重复]

    这个问题在这里已经有答案了 尝试这个 const styledDiv styled div props gt props takeViewportHeight min height calc 100vh 16px 它不起作用 我是否遗漏了样
  • 警告:mysql_query(): 3 不是有效的 MySQL-Link 资源

    我遇到了这个奇怪的错误 但我不知道它来自哪里 Warning mysql query 3 is not a valid MySQL Link resource in 3号怎么了 我不明白 有没有人自己经历过这个错误 PHP 使用资源作为特殊
  • 如何在 Android 模拟器中安装 APK 文件?

    我终于成功混淆了我的 Android 应用程序 现在我想通过安装来测试它APK http en wikipedia org wiki APK 28file format 29文件并在模拟器上运行 如何在 Android 模拟器上安装 APK
  • 无法在 macOS High Sierra 上构建和安装 Valgrind

    我无法在 macOS High Sierra 上安装 Valgrind 无法通过brew 我尝试过3 10 https github com msgpack msgpack c issues 525 After make install 我
  • R语言变量冲突

    我有一个 R 脚本 它采用 R 的其他脚本并以这种方式操作它们 并且还执行它们的代码 我的脚本使用一些变量 显然 当其他脚本使用公共变量名时 我会陷入混乱 我希望我可以像在胶囊中一样执行其他脚本 这样重合的变量就不会互相影响 我一直在阅读有
  • 将冷却/计时器添加到 on_message [Discord.py]

    我最近开始用 Python 制作一个 Discord 机器人 用它测试 Python 的基础 并自己创建了一个带有多个命令的功能机器人 为了扩大其用途 我添加了一个级别 XP 系统 到目前为止该系统正在运行 bot event async
  • Nexus 7 上不显示菜单按钮

    所以我很长时间都面临这个问题 我的 Nexus 4 和 Nexus 7 都运行 Android 4 3 并且我有 targetSdkVersion 11 的应用程序 我使用 11 因为任何低于 11 的目标 sdk 都不支持我的多点触控 问
  • IE 7 和 8 中的 CSS 倾斜转换

    我有菱形样式的菜单 它使用以下代码 它在 Chrome firefox ie9 等中运行良好 但我现在需要在 IE 7 和 8 中运行 有没有办法在这些旧版浏览器上执行此操作 http jsfiddle net C7e7U http jsf