I\xe2\x80\x99m 使用 CSS 列在我的网站上获得多列主导航(www.alexanderschlosser.de/wordpress \xe2\x80\x93 使用 Semplice 构建)。在 Chrome 中一切正常,但在 Safari 中列的顶部未正确对齐。知道什么可能导致这个问题吗?_
\n\n这里\xe2\x80\x99是它在Chrome中的样子,并且应该在任何地方都可以看到:\n Chrome渲染
\n\n这里\xe2\x80\x99是它在Safari中的样子(第二列开始变低):\n Safari 渲染
\n\n更奇怪的是\xe2\x80\x99:当我使用检查器时,Safari 似乎仍然认为元素都在彼此的下面。这可能是问题所在吗?\n Safari Inspector Screenshot
\n\n_
\n\n这里\xe2\x80\x99是我的CSS
\n\n/***VERTICAL MENU IN TWO COLUMNS***/\nnav.standard ul {\n display: block !important; \n columns: 2;\n -webkit-columns: 2;\n -moz-columns: 2;\n height: 100px !important;\n}\n\n/***DISTANCE BETWEEN MENU ELEMENTS***/\nnav.standard ul li {\n padding-bottom: 15px !important;\n}\n\n/***STYLING MENU ITEMS***/\n.navPrimary a {\n background-image: linear-gradient(to bottom, #252526, #252526);\n background-position: left 0 bottom 0;\n background-repeat: repeat-x;\n background-size: 2px 1px;\n}\nRun Code Online (Sandbox Code Playgroud)\n\n我的 …
我正在尝试在我的网站上嵌入几个 .svg 文件。只要我使用 Chrome、Firefox 或迄今为止我测试过的任何移动浏览器,一切似乎都能正常工作。但是,有一个例外:每当我在 Windows Phone (Internet Explorer Mobile) 上查看 svg 时,图像都会失真。
我想我已经找到了这种行为的原因:因为我希望任何 svg 的大小都是可变的,所以我给了它们一个基于百分比的宽度和一个自动高度。如前所述,这适用于大多数浏览器。然而,Internet-Explorer 似乎忽略了 height:auto 从而将 svg 拉伸到它的最大高度。
也就是说,一种解决方案是为每个 .svg 分配固定尺寸。但这会牺牲响应式设计的想法。
有没有人知道问题可能是什么?
哦,这是我网站页面的链接,其中包含一个 svg(黑色“星”表示“选择”):
http://alexanderschlosser.de/select.html
提前谢谢了!亚历克斯
编辑:这是嵌入式SVG之一的代码。
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="90px" height="90px" viewBox="0 0 90 90" enable-background="new 0 0 90 90" xml:space="preserve">
<path fill="#E64132" d="M45,87.25C21.703,87.25,2.75,68.297,2.75,45S21.703,2.75,45,2.75S87.25,21.703,87.25,45
S68.297,87.25,45,87.25"/>
<path fill="#FFFFFF" …Run Code Online (Sandbox Code Playgroud)