`
luolonghao
  • 浏览: 119670 次
  • 性别: Icon_minigender_1
  • 来自: Shanghai
社区版块
存档分类
最新评论

safari和chrome取不到style.border,是BUG?

阅读更多
<div id="test_div" style="border:1px solid #000000;"></div>
<script type="text/javascript">
alert(document.getElementById("test_div").style.border);
</script>

safari和chrome上运行alert出来结果为空,IE、FF、Opera都有值。

演示: http://kindsoft.net/test/style_border_test.html

奇怪的是style.borderTop可以取得border,但style.borderLeft,style.borderBottom,style.borderRight都不行。

浏览器版本:
Windows XP, safari 3.2
Windows XP, chrome 1.0.154.36
分享到:
评论
3 楼 汪兆铭 2009-01-20  
刚在写那代码呢。不好意思。。我写得比较慢。。

<html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=gb2312">
      <title>style border test</title>
      <script>
      function getStyleAtt(id,styleAtt){
        var style = document.getElementById(id).getAttribute("style");
        var regStr = "/"+styleAtt+":(\s*w+\s*);/g";
        var pattern = new RegExp(styleAtt+":\s*([^;]+)");
        var matches = style.match(pattern);
        var ret = null;
        if(matches && matches.length > 0) ret = matches[1];
        return ret
      }
      </script>
    </head>
    <body>
        <div id="test_div" style="border: 1px solid rgb(0, 0, 0); font:icon; background:#333333">hello</div>
        <script>
           alert("test_div.border: "+getStyleAtt("test_div","border")
		   		+"\ntest_div.background: "+getStyleAtt("test_div","background"));
        </script>
    </body>
</html>
2 楼 luolonghao 2009-01-07  
这个是Webkit的BUG,已经修复好了,只不过Safari和Chrome还没用最新版本Webkit,所以问题还在。

https://bugs.webkit.org/show_bug.cgi?id=15823
1 楼 achun 2009-01-06  
<p>截取一段代码给你参考</p>
<pre name='code' class='js'>/*获取elem的某个style属性*/

function getStyle(elem, property){

if (property=='class') property='className';

else property=this.camelize(property);

if (elem.currentStyle)// IE5+

return elem.currentStyle[property];

if(elem.style[property])

return elem.style[property];

if (document.defaultView.getComputedStyle)// FF/Mozilla

var currentStyle = document.defaultView.getComputedStyle(elem, null);

else if (window.getComputedStyle)// NS6+

var currentStyle = window.getComputedStyle(elem, null);

return currentStyle[property] || currentStyle.getPropertyValue(this.uncamelize(property));

}</pre>
 

相关推荐

    web前端面试题

    - **浏览器**: 测试过的浏览器通常包括Chrome、Firefox、Safari、Edge以及IE等。 - **内核**: - Chrome 和 Edge 使用的是 Blink 内核; - Firefox 使用的是 Gecko 内核; - Safari 使用的是 WebKit 内核; - IE ...

    莫名其妙的IE 3像素Bug

    这个问题的根本原因在于IE浏览器对盒模型的处理方式与大多数现代浏览器(如Firefox、Chrome和Safari)不同。在IE中,传统盒模型(即`box-sizing: content-box`)会将边框和内填充计算在元素的总宽度和高度内,而其他...

    firefox下rowspan+border+border-collapse的bug

    由于问题主要出现在Firefox浏览器中,测试时应当同时考虑其他主流浏览器,如Chrome、Safari、Edge等,以确保网站的兼容性和用户体验。同时,还应该留意随着浏览器版本的更新,旧的bug可能已经修复,或者新的bug可能...

    常见 CSS BUG 的处理

    - **Chrome/Safari/Firefox 等现代浏览器**:这些问题通常涉及 CSS3 特性,如 Flexbox、Grid 等。可以使用前缀(如 `-webkit-`)来兼容不同的浏览器引擎。 #### 4. 预防 CSS BUG 的策略 除了遇到问题后进行解决,...

    百度地图API

    - 浏览器:IE6.0+、Firefox3.0+、Opera9.0+、Safari3.0+、Chrome - 操作系统:Windows、Mac、Linux 这意味着开发者可以广泛地部署应用,无需担心兼容性问题。 #### 五、获取API 为了使用百度地图API,开发者需要...

    CSS BUG浏览器兼容知识汇总

    部分旧版浏览器不支持`text-shadow`和`border-radius`,需使用前缀或渐进增强策略。 10. **浏览器默认样式差异** 不同浏览器对某些元素(如`button`、`input`等)的默认样式处理不同,可以使用重置CSS或统一的...

    ExtAspNet_v2.3.2_dll

    支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor。 示例: http://extasp.net/ 开源: ...

    css 多浏览器兼容解决方案 下载

    以上是针对CSS多浏览器兼容的一些常见问题和解决策略,实际开发中,还需要关注其他浏览器,如Chrome、Safari和Opera等,以及最新的浏览器版本,因为它们也可能有自己的解析差异。同时,利用条件注释、Modernizr等...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor。 示例: http://extasp.net/ 开源: ...

    前端兼容问题总结

    1. **浏览器引擎**:现代浏览器主要分为两类引擎,一种是基于WebKit的(如Safari、Chrome早期版本),另一种是基于Gecko的(如Firefox)。此外,Internet Explorer(IE)系列浏览器拥有自己独特的渲染引擎。 2. **...

    史上最全前端面试题(含答案).docx

    9. **浏览器测试与内核**:常见的浏览器有IE(Trident内核)、Firefox(Gecko内核)、Chrome和Safari(WebKit内核)、Opera(Presto内核,现为Blink内核)。 10. **IE6常见BUG及解决方案**:包括双边距问题、3像素...

    图库新版jQuery焦点图 JS代码

    tips[44] = '设计有两种方法:一种是简单到明显没有缺陷,另一种复杂到缺陷不那么明显。—— 托尼·霍尔'; tips[45] = '广告创意不要超越大多数人的智商,否则会落得无人问津。'; tips[46] = '没人能拥有所有的答案...

    CSS3主要知识点总结+HTML5新标签(图文版).docx

    - 为了支持早期浏览器,CSS3属性通常需要加上特定浏览器的前缀,如 `-moz-`(Firefox),`-webkit-`(Chrome和Safari,但现在大部分已经不再需要),`-ms-`(Internet Explorer)和`-o-`(Opera)。 3. **position...

    css浏览器兼容整理

    #### 一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSShack兼容一览表 为了确保网站能在不同的浏览器中呈现出一致的效果,了解和掌握各种CSS hack技巧是非常重要的。以下是一些常用且有效的CSS hack方法: 1. **区别IE...

    2016前端面试题及答案.docx

    9. **浏览器测试与内核**:常见的浏览器如IE(Trident内核)、Firefox(Gecko内核)、Chrome和Safari(WebKit内核)、Opera(Presto内核)。 10. **IE6常见bug及解决方法**:包括双边距问题、3像素问题、超链接...

    最新史上最全前端面试题(含答案).docx

    9. **常见浏览器及其内核**:IE(Trident内核)、Firefox(Gecko内核)、Chrome/Safari(WebKit内核)、Opera(Presto内核,现为Blink内核)。 10. **IE6常见BUG及解决方案**:双边距BUG、3像素问题、超链接hover...

    2016前端面试题及答案.pdf

    9. **常见浏览器及其内核**:IE使用Trident内核,Firefox使用Gecko,Chrome和Safari使用WebKit,Opera使用Presto。 10. **IE6常见bug的解决方法**:双边距bug通过display属性解决,3像素问题使用display:inline,...

    初级Web前端工程师面试必看面试题HTMLCSSJavaScript.docx

    前端工程师需要关注不同浏览器的渲染差异,例如WebKit(Safari、Chrome)、Presto(Opera)、Gecko(Firefox)和Trident(IE)。针对IE6的常见问题,如双边距BUG、浮动引起的3像素问题、Z-index问题等,需要使用特定...

    网页制作培训大纲

    同时,课程会介绍主流浏览器(如Chrome、Firefox、Safari等)的特点,以及如何处理常见的浏览器兼容性问题和bug。 五、li标签和a标签 列表项(li)常用于创建有序或无序列表,课程会教授如何美化li标签的样式。a...

Global site tag (gtag.js) - Google Analytics